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

  }

}

巴特西

Angular ViewChild & ViewChildren

最新文章

热门文章