时间戳

首页 > 解决方案 > 将不同的父组件注入到子组件中

javascript - 将不同的父组件注入到子组件中

问题描述

我试图解决以下情况：

我有一个将在多个父组件中使用的子组件，但是这个子组件需要能够访问父组件（即它在运行时的 parenComponent.constructor 信息）。

在这样的结构中

<BucketComponent>
    <ParentA>
       <ChildComponent>
    </ParentA>
    <ParentB>
       <ChildComponent>
    </ParentB>
<BuccketComponent>

在父母之间共享此 ChildComponent 之前，我执行了以下操作

子组件代码

component({
  selector: 'childComponent'
})
export class ChildComponent extends BaseClass<model> implements OnInit, OnDestroy {

  constructor(@Inject(ParentComponentClass) parent: Component) {
    super(parent);
  }

它奏效了。

但是当我尝试如下分享时：

const token = new InjectionToken<Component>('ParentComponentToken')

component({
  selector: 'childComponent',
providers: [
    { provide: token , useClass: ParentComponentClassA},
    { provide : token , useClass : ParentComponentClassB}]
})
export class ChildComponent extends BaseClass<model> implements OnInit, OnDestroy {

  constructor(@Inject(token) parent: Component) {
    super(parent);
  }

在 childcomponent 的一个实例中，我得到了对其父级的正确引用，但在另一个实例中却没有（在我看来，它总是引用两者之一）

顺便说一句超级（父母）；是什么使用 parentComponent.constructor 信息。

另外，我已经尝试在@Inject() 之前使用@Self() 和@Host，但无济于事。

对我如何做到这一点的任何帮助，以便只提供/注入孩子所在的父母。

先感谢您

标签： javascriptangulartypescriptdependency-injectionangular-dependency-injection

解决方案

检查本指南。父组件通过 DI 提供有关它们自己的信息，而子组件注入任何父组件的实例的想法。这里的问题是，父组件可以是任何你事先不知道的东西，所以为了解决这个问题，最好引入一个抽象基类或接口（并使用InjectionToken）并由所有父组件实现，让子组件知道期待什么合同。

推荐阅读