Angular ViewChild & ViewChildren

基础

ViewChild

ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法。它支持 Type 类型或 string 类型的选择器，同时支持设置 read 查询条件，以获取不同类型的实例。比如ElementRef和ViewContainerRef.

ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，就能正确获取查询的元素。

ViewChildren

ViewChildren 装饰器是用来从模板视图中获取匹配的多个元素，返回的结果是一个 QueryList 集合。

Demo
child.component.ts
@Component({
  selector: 'app-child',
  template: '<p>{{name}}</p><div><input value="xixi"></div>',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  public name: string = 'childName';

  greeting(name: string) {
    console.log('hello ' + name);
  }
}
app.component.ts
@Component({
  selector: 'app-root',
  template: `<app-child #childA></app-child>  
             <app-child #childB></app-child> 
             <button (click)="clickMe()" >点我</button>`,
})
export class AppComponent implements OnInit {
  @ViewChild('childA')
  child1;
  @ViewChild(ChildComponent)
  child2;
  @ViewChild('childB', {read: ElementRef})
  child3;
  @ViewChild('childB', {read: ViewContainerRef})
  child4;

  @ViewChildren(ChildComponent)
  children;

  clickMe() {
    this.child1.greeting('child1');
    this.child2.name = '我是child2';
    this.child3.nativeElement.lastElementChild.firstElementChild.value = '我是child3~';
    this.child4._data.componentView.component.greeting('child4');
    this.children._results[0].greeting('children');
  }
}