将不同的 parent 组件注入 child 组件

Question

我正在尝试解决以下情况：

我有一个 child 组件将用于多个 parent 组件，但是这个 child 组件需要访问 parent 组件（即它的 parenComponent.constructor 运行时的信息）。

在这样的结构中

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

在 parent 之间共享此 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);
  }

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

顺便超级(parent);是什么使用 parentComponent.constructor 信息。

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

关于我如何做到这一点的任何帮助，以便只有存在 child 的 parent 是 provided/injected。

提前致谢

Answer 1

检查此 guide。父组件通过 DI 提供有关自身的信息，子组件注入任何父组件的实例。这里的问题是父组件可以是你事先不知道的任何东西所以要解决这个问题最好引入一个抽象基础class或接口（并使用InjectionToken）并由所有父组件实现它让子组件知道期望的合同。

将不同的 parent 组件注入 child 组件

Injecting different parent components into child component

javascript

dependency-injection

typescript

angular

angular-dependency-injection