Angular 8：访问位于app-root上的2个逻辑组件

Question

app.component.html

<app-son></app-son>
<app-son></app-son>

我在app.component.html中放置了两个相同的组件在ngOnInit上，每个组件都应从我编写的全局服务中获取其数据。

一个组件如何知道它是上部组件还是下部组件？有没有一种方法可以“注入”数据，以便每个数据都有一个ID？

谢谢，兹维卡

Answer 1

您可以使用@ ViewChildren将子组件分组为数组：

@Component(...)
export class ParentComponent implements OnInit { 

  @ViewChildren(SonComponent)
  sons: QueryList<SonComponent>

  ngOnInit() {
    const sonsArr = this.sons.toArray()
    console.log(sonsArray) // logs array of Son components    
  }

}

因此已记录数组的第一个元素-sonsArr [0]在第二个元素上方-sonsArr [1]