Angular 2子组件检查父组件

Question

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

示例 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

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

constructor(private parentB: ParentBComponent){
}

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

请注意，您有 parent-a 和 parent-b，如果您希望能够注入任何内容，请定义一个基础组件并让 parent-a 和 parent-b 都继承自它。

你可以让它成为可选的，你可以使用Optional装饰器：

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