一、ViewChild
ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函数中,才能正确获取查询的元素。
1.@ViewChild 使用模板变量名
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Welcome to Angular World</h1> <p #greet>Hello {{ name }}</p> `, }) export class AppComponent { name: string = 'Semlinker'; @ViewChild('greet') greetDiv: ElementRef; ngAfterViewInit() { console.dir(this.greetDiv); } }
2.@ViewChild 使用模板变量名及设置查询条件
import { Component, TemplateRef, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Welcome to Angular World</h1> <template #tpl> <span>I am span in template</span> </template> `, }) export class AppComponent { @ViewChild('tpl') tplRef: TemplateRef<any>; @ViewChild('tpl', { read: ViewContainerRef }) tplVcRef: ViewContainerRef; ngAfterViewInit() { console.dir(this.tplVcRef); this.tplVcRef.createEmbeddedView(this.tplRef); } }
3.@ViewChild 使用类型查询
//child.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'exe-child', template: ` <p>Child Component</p> ` }) export class ChildComponent { name: string = 'child-component'; }
//app.component.ts import { Component, ViewChild, AfterViewInit } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'my-app', template: ` <h4>Welcome to Angular World</h4> <exe-child></exe-child> `, }) export class AppComponent { @ViewChild(ChildComponent) childCmp: ChildComponent; ngAfterViewInit() { console.dir(this.childCmp); } }
以上代码运行后,控制台的输出结果:
二、ViewChildren
ViewChildren 用来从模板视图中获取匹配的多个元素,返回的结果是一个 QueryList 集合。
@ViewChildren 使用类型查询
import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'my-app', template: ` <h4>Welcome to Angular World</h4> <exe-child></exe-child> <exe-child></exe-child> `, }) export class AppComponent { @ViewChildren(ChildComponent) childCmps: QueryList<ChildComponent>; ngAfterViewInit() { console.dir(this.childCmps); } }
以上代码运行后,控制台的输出结果:
文章转自:https://segmentfault.com/a/1190000008695459