0

使用下面的 DOM 片段:

<ng-app>
  <ng-comp1></ng-comp1>
  <ng-comp2>
     <ng-comp3></ng-comp3>
  </ng-comp2>
  <ng-comp1></ng-comp1>
</ng-app>

我想ng-comp3列出 DOM 文档中的所有组件ng-comp1。有办法吗?

ViewChildren仅列出ng-comp3.

document.querySelector列出 DOM 元素,而不是组件。

4

1 回答 1

0

简短的回答是“不,您不能直接列出它们”。

另一方面,您可以做的是在您的组件中ng-app注入并通过.ng-comp3ng-comp1ng-app

我在这里举了一个例子

@Component({
  selector: 'inner-hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class InnerHelloComponent implements AfterViewInit  {
  @Input() name: string;

  constructor(@Inject(forwardRef(() => AppComponent)) private app: AppComponent) {
    console.log(app.name);
  }

  ngAfterViewInit() {
    // Here you will be able to access your ViewChild
  }
}

不要忘记ViewChildand在被解雇ViewChildren之前不会被填充ngAfterViewInit

正如可能已经注意到的那样,这个想法是ng-comp1ng-app组件中查询,将其存储在公共变量中并从ng-comp3. 与我name在示例中访问属性的方式相同

于 2020-09-18T06:47:18.540 回答