Angular ViewChild 与 ContentChild：让您的组件更通用-JavaScript中文网-JavaScript教程资源分享门户

前言

在 Angular 中，组件是您构建应用程序的基本单元。为了使您的组件更加通用，您需要了解一些基本的技术，这些技术可以使您的组件更灵活，并且使它们在不同的应用程序中可以复用。

Angular 中的两个属性，ViewChild 和 ContentChild，可以使您的组件更加通用，并且更容易实现。

本文将介绍ViewChild和ContentChild的概念、作用及其在实践中的使用。

ViewChild 和 ContentChild 概念

ViewChild 和 ContentChild 都是Angular中的装饰器，用于查询组件中的特定元素。

ViewChild 查询的是组件中的某个子元素，而 ContentChild 查询的是组件中的某个子组件或指令。

ViewChild 和 ContentChild 的使用方式相同，它们都需要一个查询参数，这个参数可以是一个类、一个字符串或一个函数。

ViewChild 示例

假设您有一个子组件和一个宿主组件，您需要在宿主组件中查询子组件的某个元素，例如它的输入框。

创建一个子组件。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <div>
      <input #inputElement type="text" placeholder="输入框">
    </div>
  `
})
export class ChildComponent {}

在宿主组件中查询子组件的特定元素。

// javascriptcn.com 代码示例
import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="onClick()">查询</button>
  `
})
export class ParentComponent {
  @ViewChild('inputElement') inputElement!: ElementRef;

  onClick() {
    console.log(this.inputElement.nativeElement.value);
  }
}

在上面的代码中，您可以看到我们使用了 ViewChild 装饰器来查询子组件中的输入框。我们使用了字符串 '#inputElement' 来查询元素，这个字符串应该是模板引用变量的名称。

当我们点击“查询”按钮时，查询到的元素的值会被打印在控制台中。

ContentChild 示例

与 ViewChild 不同，ContentChild 是用于查询组件中的子组件或指令的。重复上面的操作，我们可以使用 ContentChild 查询子组件的特定元素。

创建一个子组件。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <div>
      <button (click)="onClick()">查询</button>
      <ng-content></ng-content>
    </div>
  `
})
export class ChildComponent {
  onClick() {
    console.log(this.query.nativeElement.innerHTML);
  }
}

在宿主组件中查询子组件的特定元素。

// javascriptcn.com 代码示例
import { Component, ContentChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child>
      <div #query>查询的元素</div>
    </app-child>
  `
})
export class ParentComponent {
  @ContentChild('query') query!: ElementRef;

  ngAfterContentInit() {
    console.log(this.query.nativeElement.innerHTML);
  }
}

在上面的代码中，我们使用 ContentChild 查询子组件中的某个元素。我们使用了字符串 'query' 来查询这个元素，它也应该是模板引用变量的名称。

当父组件调用 ngAfterContentInit() 函数时，查询到的元素的值会被打印在控制台中。这个函数是一个 Angular 钩子函数，用于在查询子组件后执行某些操作。

疑难解答

查询不到元素？

首先，请检查您的代码是否有语法错误。其次，请确保您正在查询正确的元素，并且模板引用变量的名称与查询参数相匹配。如果您正在使用 ContentChild，确保子组件已经加载完毕。

总结

本文介绍了在Angular中使用 ViewChild 和 ContentChild 的方法。在写可复用组件时，这两个属性十分有用。要熟练使用它们，需要多做练习。

感谢您的阅读，希望对您有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654839f37d4982a6eb281067