Angular4学习笔记（七）- ViewChild和ViewChildren

时间 2019-11-06

标签 angular4 angular 学习笔记 viewchild viewchildren 栏目 AngularJS 繁體版

原文原文链接

基础

ViewChild

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

ViewChildren

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

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');
  }
}