In the realm of abstract classes, behold this one:
export abstract class BaseStepComponent {
/** Behold thy base-step ctor */
constructor() {
}
abstract getValue(): string;
}
And lo, here is a component that inherits such abstract glory:
export class SingleChoiceStepComponent extends BaseStepComponent {
/** Verily, the single-choice-step ctor */
constructor() {
super();
}
@ViewChild("itemList") itemList: ElementRef;
getValue(): string {
return this.itemList.nativeElement.value;
}
}
Yea, many components follow in their footsteps, each with differing logic within getValue()
Elsewhere in my world, I have this member living within a component:
stepItems: QueryList<any>;
@ViewChildren("stepItem") set stepItemsContent(content: QueryList<any>) {
let items = content.toArray();
if (items.length > 0) {
this.stepItems = content;
}
}
The "Steps" stand tall in a wizard (a form of multiple pages), their types and numbers known not to the application, but all bow to the inheritance of BaseStepComponent
When the time cometh to gather the values returned by getValue(), an obstacle doth abound as mentioned below.
let values: any[] = [];
this.stepItems.forEach(step => {
let v = step.getValue(); //Behold! An IDE miracle, yet it fails at runtime.
values.push({ key: step.key, value: v });
});
Alas, due to the highborn nature of BaseStepComponent, a task ariseth unattainable:
let instance = new BaseStepComponent();
instance = Object.assign(instance, step);
Thus do I find myself at an impasse. Might thee possess knowledge on how to transcend this dilemma?