ViewChild
ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit
钩子函数调用前完成,因此在ngAfterViewInit
钩子函数中,才能正确获取查询的元素。
@ViewChild 通过模板变量名获取DOM元素
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.log(this.greetDiv.nativeElement);
}
}
@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.log(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);
}
}
以上代码运行后,控制台的输出结果:
总结
ViewChild
装饰器用于获取模板视图中的元素,它支持 Type 类型或 string 类型的选择器。
`ViewChildren
装饰器是用来从模板视图中获取匹配的多个元素,返回的结果是一个 QueryList 集合。