angular中@ViewChild、@ViewChildren的使用

@ViewChild和@ViewChildren会在父组件钩子方法ngAfterViewInit调用之前赋值。

获取DOM节点

1、在html中给DOM节点设置一个模板应用变量myBox

 <div #myBox>
      我是一个div
    </div>

2、在js中引入ViewChild

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

3、通过ViewChild装饰器获取DOM节点

@ViewChild('myBox') myBox: any;

4、在生命周期里面获取DOM

 ngAfterViewInit() {
        this.myBox.nativeElement;
    }

获取子组件对象

一. 通过模板变量名

1、在子组件中定义方法

public 方法名() {
    console.log('子组件');
  }

2、在父组件html中调用子组件的时候定义一个模板变量header

 <app-header #header></app-header>

3、在父组件js中引入ViewChild

 import { ViewChild } from '@angular/core';
 import { HeaderComponent} from '子组件路径';

4、父组件通过ViewChild装饰器获取一个组件，并赋值给一个变量

   @ViewChild('header') header： HeaderComponent;

5、父组件通过变量访问子组件的方法

this.header.方法名（）;

二. 通过组件类

1、在父组件html中调用子组件

<app-header></app-header>

3、在父组件js中引入ViewChild

import { ViewChild } from '@angular/core';
 import { HeaderComponent} from '子组件路径';

4、父组件通过ViewChild装饰器获取一个组件，并赋值给一个变量

   @ViewChild(HeaderComponent) headerComponent: HeaderComponent;

5、父组件通过变量访问子组件的方法

   this.headerComponent.方法名（）;

@ViewChildren获取子组件对象列表

当选择器是TemplateRef(模版应用变量)的时候，则会获取到html里面所有的ng-template的节点

1、在父组件html中调用子组件

  <release-people-form [peopleId]="addPeopleId" (close)="handlePopCancel()" #peopleForm></release-people-form>
  <correcting-people-form [peopleId]="addPeopleId" (close)="handlePopCancel()" #peopleForm></correcting-people-form>
  <mental-people-form [peopleId]="addPeopleId" (close)="handlePopCancel()" #peopleForm></mental-people-form>

3、在父组件js中引入ViewChildren

import { ViewChildren} from '@angular/core';

4、父组件通过ViewChildren装饰器获取一个组件列表，并赋值给一个变量

@ViewChildren('peopleForm') formList: QueryList<ElementRef>;

5、父组件通过变量访问子组件的方法

   ngAfterViewInit() {
   	 console.log(this.formList); //组件对象数组
  	 console.log(this.formList.toArray()[index] as any); //获取某个对象
  }