以角度注入具有基类类型的父组件

Question

我正在尝试将我的父组件注入到子组件中（我知道，紧密连接）。问题是我有一个继承链，由于某种原因我收到一个错误，即没有提供依赖项。

tl;dr;

我在子组件中注入基类，但出现以下错误： Template parse errors: No provider for 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() 装饰器，但这也不起作用。

根据我对依赖注入（这不是最好的）的理解，这应该有效。我正试图了解这里的原因！

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

Answer 1

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

你可以做的是为你父母的基类创建一个更通用的InjectionToken：

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

然后在你的父类组件声明中provide它 - providers 属性。

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

（注意：forwardRef 防止编译时循环引用）。

然后孩子可以将InjectionToken注入其中。

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

Answer 2

如果您希望子组件显示在父组件中，则将该子组件的选择器添加到父组件的 HTML 中。它不是为将一个组件注入另一个组件而设计的。

如果您有共享功能，请将该功能添加到服务中并使用父级和子级的服务。

父子之间的通信应该仅限于@input 属性和@output 事件。

组件的目的是显示用户界面（一些 HTML）。组件内代码的目的是支持该 HTML 的显示。

使用服务来共享属性/状态或功能/方法。创建自定义指令以共享 UI 逻辑。