Angular2+ ViewChild & ViewChildren解析

「爱情、让人受尽委屈。」 2021-09-15 01:56 331阅读 0赞

### 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);
      }
    }

以上代码运行后，控制台的输出结果：

![这里写图片描述][3386778252-58c8062751d35_articlex]

### 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);
      }
    }

以上代码运行后，控制台的输出结果：

![这里写图片描述][1584487495-58c8067ab6e82_articlex]

### 总结 ###

`ViewChild`装饰器用于获取模板视图中的元素，它支持 Type 类型或 string 类型的选择器。  
    `` `ViewChildren``装饰器是用来从模板视图中获取匹配的多个元素，返回的结果是一个 QueryList 集合。

参考：  
[https://segmentfault.com/a/1190000008695459][https_segmentfault.com_a_1190000008695459]

[3386778252-58c8062751d35_articlex]: https://sfault-image.b0.upaiyun.com/338/677/3386778252-58c8062751d35_articlex
[1584487495-58c8067ab6e82_articlex]: https://sfault-image.b0.upaiyun.com/158/448/1584487495-58c8067ab6e82_articlex
[https_segmentfault.com_a_1190000008695459]: https://segmentfault.com/a/1190000008695459