angular - 以 Angular 注入(inject)具有基类类型的父组件

Question

我正在尝试将我的父组件注入(inject)到子组件中(紧密耦合，我知道)。问题是我有一个继承链，由于某种原因我得到一个错误，没有依赖项的提供者。

tl;dr;

我在子组件中注入(inject)基类，但出现以下错误:模板解析错误:没有 BaseClass 的提供者

export class BaseClass { ... }

@Component({ selector: 'parent-comp' })
export class ParentComponent extends BaseClass {}

@Component({ selector: 'child-comp' })
export class ChildComponent {
    constructor(public parent: BaseClass) {}
}

用法:

<parent-comp>
   <child-comp>

原因

我的 ParentComponent 从 BaseClass 继承了一些功能，我想在子组件中访问其中的一些功能。我正在构建一个库，并且有多个从 BaseClass 继承的组件。我不知道将使用哪些继承的组件，因为库使用者决定了这一点。

我试过添加 @Host() 装饰器，但这也不起作用。

根据我对依赖注入(inject)(这不是最好的)的理解，这应该可行。我正在尝试了解这里的原因!

如果有人能对此事有所了解，我将不胜感激!

Answer 1

不幸的是，注入(inject)器不支持通过继承来定位组件。它只能找到一个特别命名的组件，即 ParentClass。

您可以为父类的基类创建一个更通用的 InjectionToken:

export const BaseClassInjectionToken = new InjectionToken<BaseClass>('BaseClass');

然后在您的父类组件声明中提供 - providers 属性。

providers: [{ provide: BaseClassInjectionToken, useExisting: forwardRef(() => ParentComponent) }]

(注意:forwardRef 防止编译时循环引用)。

然后 child 可以将 InjectionToken 注入(inject)其中。

constructor(@Inject(BaseClassInjectionToken) private parent: BaseClass)