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

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

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

问题：

当我将消息组件嵌入任何孩子类型中时， 我无法在消息中指定适当的派生类 组件@Host。因此，依赖关系解析器提供了一个错误No provider for ComponentBase。

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

我们需要使用componentFactoryResolver吗？或我们可以尝试而不是主机的某种方式？

Answer 1

编辑ChildA.component.ts元数据，并具有以下配置：

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

父母必须以班级接口令牌的名义为自己提供别名。

官方文档中的更多信息。