Question

我有不同类型的组件，但共享一些常用算法。所以我决定在Angular中使用Component Inheritance并尝试使用模板方法模式。

基本上，我需要为某些方法做一个不同的实现。

基本组件

@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

中

@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>

问题：

当我在任何Child类型中嵌入消息组件时说ChildA， ChildB我无法在Message中指定正确的派生类组件@Host。因此，依赖项解析程序会提供错误No provider for ComponentBase。

我使用@Host来访问包含的父组件的方法。其中大多数都是抽象的组成部分。

我们需要使用ComponentFactoryResolver吗？或者我们可以尝试使用其他方式而不是Host？

Answer 1

使用以下配置编辑ChildA.component.ts元数据：

@Component({
  templateUrl: "app/component/childA.component.html",
  selector: "child-a",
  providers: [
   { provide: ComponentBase, useExisting: forwardRef(() => ChildAComponent) }
  ]
})

父级必须通过以类接口令牌的名义为自己提供别名来进行协作。

官方docs中的更多信息。

基类解析器的组件继承和DI

1 个答案: