3

我有不同类型的组件，但共享一些通用算法。所以我决定在 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>

嵌入在 ChildA.component 中的 MessageComponent

@Component({
    templateUrl: "app/common/message.html",
    selector: "message"

})
export class MessageComponent {

    constructor(@Host() hostComponent: ComponentBase<IComponentViewData>) {

    }
}

消息.html

<div>{{ hostComponent.message }} </div>
<button (click)="exit()"></button>

问题：

当我在任何子类型中嵌入消息组件时，例如 ChildA、ChildB，我无法在 Message 组件中指定正确的派生类 @Host。所以依赖解析器提供了一个错误No provider for ComponentBase。

我用来@Host访问包含的父组件的方法。它们中的大多数都在抽象组件中。

我们需要使用ComponentFactoryResolver吗？或者我们可以尝试其他方式来代替主机？

4

1 回答 1

3

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

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

父级必须通过以类接口令牌的名称为其自身提供别名来进行合作。

官方文档中的更多信息。

于 2018-04-04T13:05:40.733 回答