在 Angular 中使用 ViewChild 访问子组件、指令或 DOM 元素的操作方法_AngularJs

简介

本文将向您介绍 angular 的 viewchild 装饰器。

在某些情况下，您可能希望从父组件类中访问指令、子组件或 dom 元素。viewchild 装饰器返回与给定指令、组件或模板引用选择器匹配的第一个元素。

先决条件

如果您想要跟随本教程进行操作：

考虑安装 @angular/cli。
使用 @angular/cli 创建一个新项目，以测试 viewchild 在其中的功能。

本教程已经验证过可以在 @angular/core v13.0.2 和 @angular/cli v13.0.3 下使用。

使用 viewchild 与指令

viewchild 使得访问指令成为可能。

假设您有一个 sharkdirective。该指令将查找具有属性 appshark 的元素，并在元素的文本前面添加单词 "shark"。

理想情况下，您将使用 @angular/cli 来 generate 您的指令：

ng generate directive shark --skip-tests

此命令将创建一个 shark.directive.ts 文件，并将该指令添加到 app.module.ts：

import { sharkdirective } from './shark.directive';
...
@ngmodule({
  declarations: [
    appcomponent,
    sharkdirective
  ],
  ...
})

然后，使用 elementref 和 renderer2 来重写文本。将 shark.directive.ts 的内容替换为以下内容：

import {
  directive,
  elementref,
  renderer2
} from '@angular/core';
@directive(
  { selector: '[appshark]' }
)
export class sharkdirective {
  creature = 'dolphin';
  constructor(elem: elementref, renderer: renderer2) {
    let shark = renderer.createtext('shark ');
    renderer.appendchild(elem.nativeelement, shark);
  }
}

接下来，在组件模板中的一个包含文本的 span 中添加一个 appshark 属性。将 app.component.html 的内容替换为以下内容：

<span appshark>fin!</span>

在浏览器中查看应用程序时，将在元素的内容之前呈现单词 "shark"：

shark fin!

现在，您还可以访问 sharkdirective 的 creature 实例变量，并使用其值设置一个 extracreature 实例变量。将 app.component.ts 的内容替换为以下内容：

import {
  component,
  viewchild,
  afterviewinit
} from '@angular/core';
import { sharkdirective } from './shark.directive';
@component({
  selector: 'app-root',
  templateurl: './app.component.html',
  styleurls: ['./app.component.css']
})
export class appcomponent implements afterviewinit {
  extracreature!: string;
  @viewchild(sharkdirective)
  set appshark(directive: sharkdirective) {
    this.extracreature = directive.creature;
  };
  ngafterviewinit() {
    console.log(this.extracreature); // dolphin
  }
}

此代码使用了一个 setter 来设置 extracreature 变量。请注意，它等待 afterviewinit 生命周期钩子来访问变量，因为这是子组件和指令可用的时候。

在浏览器中查看应用程序时，您仍将看到 "shark fin!" 消息。但是，在控制台日志中，它将显示：

dolphin

父组件能够访问指令的值。

使用 viewchild 与 dom 元素

viewchild 使得访问具有模板引用变量的本机 dom 元素成为可能。

假设您在模板中有一个带有 #someinput 引用变量的 <input>。将 app.component.html 的内容替换为以下内容：

<input #someinput placeholder="your favorite sea creature">

现在，您可以使用 viewchild 访问 <input> 并设置 value。将 app.component.ts 的内容替换为以下内容：

import {
  component,
  viewchild,
  afterviewinit,
  elementref
} from '@angular/core';
@component({
  selector: 'app-root',
  templateurl: './app.component.html',
  styleurls: ['./app.component.css']
})
export class appcomponent implements afterviewinit {
  @viewchild('someinput') someinput!: elementref;
  ngafterviewinit() {
    this.someinput.nativeelement.value = 'whale!';
  }
}

当 ngafterviewinit 触发时，<input> 的值将被设置为：

whale!

父组件能够设置子 dom 元素的值。

使用 viewchild 与子组件

viewchild 使得访问子组件并调用子组件可用的方法或访问实例变量成为可能。

假设您有一个 pupcomponent。

理想情况下，您将使用 @angular/cli 来 generate 您的组件：

ng generate component pup --flat --skip-tests

此命令将创建 pup.component.ts、pup.component.css 和 pup.component.html 文件。并将该组件添加到 app.module.ts：

import { pupcomponent } from './pup.component';
...
@ngmodule({
  declarations: [
    appcomponent,
    pupcomponent
  ],
  ...
})

然后，在 pupcomponent 中添加一个返回消息的 whoami 方法：

import { component, oninit } from '@angular/core';
@component({
  selector: 'app-pup',
  templateurl: './pup.component.html',
  styleurs: ['./pup/component.css']
})
export class pupcomponent implements oninit {
  constructor() { }
  whoami() {
    return 'i am a pup component!';
  }
  ngoninit(): void {
  }
}

接下来，在应用程序模板中引用子组件。将 app.component.html 的内容替换为以下内容：

<app-pup>pup works!</app-pup>

现在，您可以使用 viewchild 在父组件类中调用 whoami 方法。将 app.component.ts 的内容替换为以下内容：

import {
  component,
  viewchild,
  afterviewinit
} from '@angular/core';
import { pupcomponent } from './pup.component';
@component({
  selector: 'app-root',
  templateurl: './app.component.html',
  styleurls: ['./app.component.css'],
})
export class appcomponent implements afterviewinit {
  @viewchild(pupcomponent) pup!: pupcomponent;
  ngafterviewinit() {
    console.log(this.pup.whoami()); // i am a pup component!
  }
}

在浏览器中查看应用程序时，控制台日志将显示：