Question

我有一个div元素，其中包含其他三个div。现在，我需要使用Angular 6将所有div都包含在一个div中。我正在使用@ViewChildren进行此操作。但是我只能在main div中获取第一个元素。

如何在'mainDiv'中获取所有div元素？这是我的代码：

<div class="mainDiv" #divElements>
  <div>First Element</div>
  <div>Second Element</div>
  <div>Third Element</div>
</div>

这是我的打字稿代码：

export class sampleComponent{
  @ViewChildren('divElements') mainDiv; 
  constructor() {}
  }
  ngOnInit(){
    console.log(mainDiv);
  }
}

请指导我如何进行。

Answer 1

#divElements is a localvaiable in template to fetch that particular HtmlElement in component we are using the 
@ViewChild('divElements') annotation.

1) use localVariable for all remaining div tag to get their respective HtmlElement into your component (or)

2) Get it from **childNodes using the nativeElement from ElementRef** , check the below class for better understanding




export class AppComponent  {

  name = 'Angular 6';

  @ViewChild('divElements')
  public divElements: ElementRef;



  ngOnInit() {
    console.log(this.divElements.nativeElement.childNodes);
  }

Answer 2

您可以使用常规的js方法来执行此操作。例如-document.getElementsByClassName（“ mainDiv”）

如何在Angular 6的主div中获取每个div？

2 个答案: