如何在@ViewChild Angular2中查找子元素？

发布时间：2020-12-17 17:39:41 所属栏目：安全来源：网络整理

导读：import { Component,ViewChild } from '@angular/core';@Component({ selector: 'my-app',template: ` div #container ppara 1/p ppara 2/p buttonbutton 1/button /div `})export class AppComponent { @ViewChild('container') myDiv; ngAfterViewInit(){

import { Component,ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',template: `
    <div #container>
        <p>para 1</p>
        <p>para 2</p>
        <button>button 1</button>
    </div>
  `
})
export class AppComponent {
  @ViewChild('container') myDiv;

  ngAfterViewInit(){
    //this console.log would print this [p,p,button]
    console.log(this.myDiv.nativeElement.children);
    //how can I access to only p nativeElement only? 
  } 

}

见plunker

解决方法

您可以尝试以下方法来获取p元素的数组：

Array.from(this.myDiv.nativeElement.children).filter(tag => tag.tagName === 'P')

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!