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

尝试将父组件插入子组件不是“最佳实践”。如果您具有共享功能，则可以将该功能添加到服务中，并从父级和子级中使用该服务。

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

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

如果您希望子组件显示在父组件中，则可以将该子组件的选择器添加到父组件的HTML中。将一个组件注入另一个组件没有任何意义（并且不是那样设计的。）

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

Answer 2

不幸的是，注入器不支持通过继承来定位组件。它只能找到一个特别命名的组件，即 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)

在angular中注入具有基类类型的父组件

2 个答案: