组件继承和基类解析器的依赖注入

Question

我有不同类型的组件，但它们共享一些常见算法。因此，我决定在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吗？

- Murali Murugesan

Answer 1

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

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

父级组件必须提供具有类-接口标记名称的别名以便自我引用。

更多信息请参见官方文档。

- Tomasz Kula