Angular ViewChild 与 ViewChildren 介绍

ViewChild 这个属性在 Angular 是属於很常用的一部份

今天就来了解一下 ViewChild 与 ViewChildren 的差别与使用方式吧！

先做一个子组件

HelloComponent

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `<h1>Hello {{ name }}!</h1>`,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `,
  ],
})
export class HelloComponent {
  @Input() name: string;
}

ViewChild

属性装饰器，用於配置一个检视查询。 变更检测器会在检视的 DOM 中查询能匹配上该选择器的第一个元素或指令。 如果检视的 DOM 发生了变化，出现了匹配该选择器的新的子节点，该属性就会被更新。
它支援 Type 类型或 string 类型的选择器，同时支持设置 read 查询条件，以获取不同类型的实例。比如 ElementRef 和 ViewContainerRef.

父组件

<hello #hello name="{{ name }}"></hello>

import { AfterViewInit, Component, VERSION, ViewChild } from "@angular/core";
import { HelloComponent } from "./hello.component";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements AfterViewInit {
  name = "Angular " + VERSION.major;

  @ViewChild("hello") helloElement: HelloComponent;
  ngAfterViewInit() {
    // child is set
    console.log("helloElement", this.helloElement);
  }
}

console 出来可以直接取到子组件里的变数

ViewChildren

用於配置检视查询的引数装饰器。

父组件

<ng-container *ngFor="let item of arrName">
  <hello #item [name]="item"></hello>
</ng-container>

import { AfterViewInit, Component, VERSION, ViewChild } from "@angular/core";
import { HelloComponent } from "./hello.component";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements AfterViewInit {
  arrName = ["aa", "bb", "cc"];
  @ViewChildren("item") itemElement: QueryList<HelloComponent>;

  ngAfterViewInit() {
    this.itemElement.map((e) => {
      console.log("itemElement", e.name); // 依序提出子组件里的值
    });
  }
}

此为 console this.itemElement 的画面

注意：
ViewChildren 一定要搭配 QueryList 一起使用，不然就不能实现列表更新这件事了
因生命周期关系 ViewChild 与 ViewChildren 要在 ngAfterViewInit 里才能实现

范例：https://stackblitz.com/edit/angular-ivy-cdn6fp

参考资料：
ViewChild
ViewChildren