Angular: 属性装饰器ViewChild终章

Posted 2021-04-26 技术农夫

点击上方 “公众号” 可以订阅哦！

终

章

01

回顾

上节内容

介绍Angular的属性装饰器

meloneat，公众号：GitHub应用指南

中比较完整地介绍了使用方法，继续补充其在组件和指令获取的用法。

02

组件和指令在@ViewChild的用法

场景：为了获得子组件对象，往往也会考虑使用@ViewChild来实现。

看下面的实例：

import {AfterViewInit, Component, ElementRef, QueryList, ViewChild, ViewChildren} from '@angular/core';import {ChildComponent} from './child.component';
@Component({ selector: 'ac', template: ` <!-- view child for Component --> <app-child #appChild></app-child> <app-child></app-child> `, styleUrls: ['./app.component.less']})export class AppComponent implements AfterViewInit { /**** 组件 ****/   @ViewChild('appChild') componentChild: ChildComponent;   // 方法一：通过模板变量名获取  @ViewChild(ChildComponent) componentChildByType: ChildComponent;   // 方法二：直接通过组件类型获取 @ViewChildren(ChildComponent) componentChildList: QueryList<ChildComponent>;  // 获取所有的
 ngAfterViewInit(): void { // DOM节点 console.log(this.componentChild); if (this.componentChildList != null && this.componentChildList.length !== 0) { this.componentChildList.forEach(elementRef => console.log(elementRef)); } }}

其中方法二，就是获取ChildComponent组件就是通过给装饰器传入组件类型( @ViewChild(ChildComponent) )来实现的，而componentChildByType则是那个对象，如果组件ChildComponent有相应的方法，便可以轻松操作子组件的状态。

那么Directive呢？

import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core'; @Directive({selector: 'child-directive'})class ChildDirective {} @Component({selector: 'someCmp', templateUrl: 'someCmp.html'})class SomeCmp implements AfterViewInit { // TODO(issue/24571): remove '!'. @ViewChild(ChildDirective, {static: false}) child !: ChildDirective;  ngAfterViewInit() { // child is set }}

当然，使用exportAs是甄别具体指令非常有效的方法，它用来定义一个名字，用于在模板中把该指令赋值给一个变量，模板变量的变种。像这样使用：

@Directive({ selector: 'child-dir', exportAs: 'child' // ！！！划重点了})class ChildDir {} @Component({ selector: 'main', template: `<child-dir #c="child"></child-dir>`})class MainComponent {   @ViewChild('c') childDir: ChildDir;    // 使用#c 就是这么简单}

GitHub应用指南专属小程序

专属工程师的服务指南

好文章    点在看