Angular 2子组件检查父组件

Question

我想要实现的是基于哪个组件是其父组件的组件的不同行为。因此，在以下两种情况下， child 的行为会略有不同。

示例 A

<parent-a>
<child></child>
</parent-a>

示例 B

<parent-b>
<child></child>
</parent-b>

我尝试执行以下操作

constructor(
    el: ElementRef) {
      this.el = el; 
  }

  ngAfterViewInit() {
    const hostElem = this.el.nativeElement;
    console.log(hostElem);
    console.log(hostElem.children);
    console.log(hostElem.parentNode);
  }

尽管 ngAfterViewInit 对我来说有点晚了，但我仍然在 parentNode 上得到了 null

有没有办法实现这样的目标？

Answer 1

如果您需要实际的组件(而不是节点元素)，您可以使用注入(inject)器。

constructor(private parentB: ParentBComponent){
}

ngAfterViewInit() {
  this.parentB.someMethod()
}

请注意，您有 parent-a和 parent-b ，如果您希望能够注入(inject)任何内容，请定义一个基础组件并同时拥有 parent-a和 parent-b从中继承。

您可以将其设为可选，您可以使用 Optional装饰师:

constructor(@Optional() private parentB?: ParentBComponent){
}