Наследование компонентов и 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>

Проблема:

Поскольку я встраиваю компонент сообщения в любой из дочерних типов, скажем ChildA, ChildB, я не смог указать правильный производный класс в компоненте Message. @Host, Таким образом, средство разрешения зависимостей выдает ошибку No provider for ComponentBase,

я использовал @Host для доступа к методам содержащегося родительского компонента. Большинство из них находятся в абстрактном компоненте.

Нужно ли нам использовать https://angular.io/api/core/ComponentFactoryResolver? Или каким-то другим способом мы можем попробовать вместо Host?

Answer 1

Редактировать ChildA.component.ts метаданные со следующей конфигурацией:

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

Родитель должен сотрудничать, предоставляя себе псевдоним в имени токена интерфейса класса.

Больше информации в официальных документах.