我有不同类型的组件,但它们共享一些常见算法。因此,我决定在Angular中使用组件继承,并尝试使用模板方法模式。
基本上,我需要针对某些方法进行不同的实现。
基础组件
@Injectable()
export abstract class ComponentBase<IComponentViewData> {
public isReadOnly: boolean;
public data: any;
public message: string;
// template method
saveData(){
validateBeforeSave();
save();
afterSave();
}
save(){
}
protected abstract afterSave(){
}
protected abstract validateBeforeSave(): void;
}
exit(){
}
}
子组件 - 类型 A
@Component({
templateUrl: "app/component/childA.component.html",
selector: "child-a"
})
export class ChildAComponent extends ComponentBase<IChildTypeAViewData> { //IChildTypeAViewData : IComponentViewData
protected afterSave(){
this.message ='Child A executed successfully'
}
}
ChildA.component.html
该组件使用父组件的字段和方法。同时嵌入了依赖于父组件的常见消息模板。
<div *ngIf="isReadOnly">
Show Data here
<button (click)="saveData()" />
<message></message>
</div>
MessageComponent嵌入在ChildA组件中
@Component({
templateUrl: "app/common/message.html",
selector: "message"
})
export class MessageComponent {
constructor(@Host() hostComponent: ComponentBase<IComponentViewData>) {
}
}
message.html
<div>{{ hostComponent.message }} </div>
<button (click)="exit()"></button>
问题:
当我将消息组件嵌入到任何一个子类型中,比如ChildA、ChildB时,我无法在消息组件的@Host
中指定正确的派生类。因此,依赖解析器会提供一个错误信息:No provider for ComponentBase
。我使用了
@Host
来访问包含的父组件的方法,其中大多数方法都在抽象组件中。我们需要使用ComponentFactoryResolver吗?或者有其他方法可以尝试代替Host吗?