一、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