Angular 2 Child 个组件要检查 parent 个组件

Question

我想要实现的是基于哪个组件是其 parent 组件的组件的不同行为。因此在以下两种情况下 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

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

constructor(private parentB: ParentBComponent){
}

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

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

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

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

Angular 2 Child 个组件要检查 parent 个组件

Angular 2 Child component to check parent component

angular2-components

angular