阅读 Angular 6/RxJS 最新教程,请访问 前端修仙之路
ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成,所以在 ngAfterViewInit 钩子函数中,就能正确获取查询的元素。前端
@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); } }
@ViewChild 使用模板变量名及设置查询条件app
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); } }
@ViewChild 使用类型查询函数
child.component.tsui
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'exe-child', template: ` <p>Child Component</p> ` }) export class ChildComponent { name: string = 'child-component'; }
app.component.tsthis
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); } }
以上代码运行后,控制台的输出结果:spa
ViewChildren 用来从模板视图中获取匹配的多个元素,返回的结果是一个 QueryList 集合。prototype
@ViewChildren 使用类型查询code
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); } }
以上代码运行后,控制台的输出结果:component
@ViewChild 示例
import { Component, ElementRef, ViewChild } 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; }
编译后的 ES5 代码片断
var core_1 = require('@angular/core'); var AppComponent = (function () { function AppComponent() { this.name = 'Semlinker'; } __decorate([ core_1.ViewChild('greet'), // 设定selector为模板变量名 __metadata('design:type', core_1.ElementRef) ], AppComponent.prototype, "greetDiv", void 0);
ViewChildDecorator 接口
export interface ViewChildDecorator { // Type类型:@ViewChild(ChildComponent) // string类型:@ViewChild('tpl', { read: ViewContainerRef }) (selector: Type<any>|Function|string, {read}?: {read?: any}): any; new (selector: Type<any>|Function|string, {read}?: {read?: any}): ViewChild; }
ViewChildDecorator
export const ViewChild: ViewChildDecorator = makePropDecorator( 'ViewChild', [ ['selector', undefined], { first: true, isViewQuery: true, descendants: true, read: undefined, } ], Query);
makePropDecorator函数片断
/* * 建立PropDecorator工厂 * * 调用 makePropDecorator('ViewChild', [...]) 后返回ParamDecoratorFactory */ function makePropDecorator(name, props, parentClass) { // name: 'ViewChild' // props: [['selector', undefined], // { first: true, isViewQuery: true, descendants: true, read: undefined}] // 建立Metadata构造函数 var metaCtor = makeMetadataCtor(props); function PropDecoratorFactory() { var args = []; ... // 转换arguments对象成args数组 if (this instanceof PropDecoratorFactory) { metaCtor.apply(this, args); return this; } ... return function PropDecorator(target, name) { var meta = Reflect.getOwnMetadata('propMetadata', target.constructor) || {}; meta[name] = meta.hasOwnProperty(name) && meta[name] || []; meta[name].unshift(decoratorInstance); Reflect.defineMetadata('propMetadata', meta, target.constructor); }; var _a; } if (parentClass) { // parentClass: Query PropDecoratorFactory.prototype = Object.create(parentClass.prototype); } ... return PropDecoratorFactory; }
makeMetadataCtor 函数:
// 生成Metadata构造函数: var metaCtor = makeMetadataCtor(props); // props: [['selector', undefined], // { first: true, isViewQuery: true, descendants: true, read: undefined }] function makeMetadataCtor(props) { // metaCtor.apply(this, args); return function ctor() { var _this = this; var args = []; ... // 转换arguments对象成args数组 props.forEach(function (prop, i) { // prop: ['selector', undefined] var argVal = args[i]; if (Array.isArray(prop)) { // argVal: 'greet' _this[prop[0]] = argVal === undefined ? prop[1] : argVal; } else { // { first: true, isViewQuery: true, descendants: true, read: undefined } // 合并用户参数与默认参数,设置read属性值 for (var propName in prop) { _this[propName] = argVal && argVal.hasOwnProperty(propName) ? argVal[propName] : prop[propName]; } } }); }; }
咱们能够在控制台输入 window['__core-js_shared__'] ,查看经过 Reflect API 保存后的metadata信息
接下来咱们看一下编译后的 component.ngfactory.js 代码片断,查询条件 @ViewChild('greet')
咱们再来看一下前面示例中,编译后 component.ngfactory.js 代码片断,查询条件分别为:
1.@ViewChild('tpl', { read: ViewContainerRef })
2.@ViewChild(ChildComponent)
经过观察不一样查询条件下,编译生成的 component.ngfactory.js 代码片断,咱们发现 Angular 在建立 AppComponent 实例后,会自动调用 AppComponent 原型上的 createInternal 方法,才开始建立组件中元素,因此以前咱们在构造函数中是获取不到经过 ViewChild 装饰器查询的视图元素。另外,配置的视图查询条件,默认都会建立一个 jit_QueryList 对象,而后根据 read 查询条件,建立对应的实例对象,而后添加至 QueryList 对象中,而后在导出对应的查询元素到组件对应的属性中。
ViewChild 装饰器用于获取模板视图中的元素,它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不一样类型的实例。而 ViewChildren 装饰器是用来从模板视图中获取匹配的多个元素,返回的结果是一个 QueryList 集合。