@ViewChild 和 @ContentChild 有什么区别

typescript

@ViewChild 和 @ContentChild 是 Angular 中两个重要的装饰器，用于在组件中访问子组件或子元素。虽然它们都用于在父组件中访问子组件或子元素，但它们之间有一些关键区别。

首先，让我们来看看 @ViewChild。这个装饰器允许父组件访问在其模板中声明的子组件或 DOM 元素。通常情况下，@ViewChild 用于获取单个子组件或元素，并且通过指定组件类名或模板引用变量名来选择子元素。下面是一个简单的示例：

typescript
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'parent-component',
  template: <code>
    <child-component></child-component>
    <div #childElement>Some content</div>
  </code>
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;
  @ViewChild('childElement') childElement!: ElementRef;
  // 可以在这里使用 this.childComponent 或 this.childElement 访问子组件或 DOM 元素
}

在上面的示例中，@ViewChild 装饰器分别用于获取 ChildComponent 类型的子组件和名为 childElement 的 DOM 元素。这使得父组件能够直接访问子组件的属性和方法，或者操作 DOM 元素的属性和内容。

---

区别与使用场景

@ContentChild 与 @ViewChild 有所不同，它用于在父组件中访问子组件或 DOM 元素，但是它查找的范围更广泛。@ContentChild 用于访问父组件投影进子组件的内容（ng-content）。这意味着它可以访问子组件的模板中通过 投影进来的内容。

下面是一个使用 @ContentChild 的示例：

typescript
import { Component, ContentChild, ElementRef } from '@angular/core';
@Component({
  selector: 'child-component',
  template: <code>
    <ng-content></ng-content>
    <div #contentElement>Projected content</div>
  </code>
})
export class ChildComponent {
  @ContentChild('contentElement') contentElement!: ElementRef;
  // 可以在这里使用 this.contentElement 访问投影进来的 DOM 元素
}

在这个例子中，@ContentChild 装饰器用于获取名为 contentElement 的投影元素，它是父组件投影进子组件中的内容。这使得父组件能够直接访问子组件模板中投影进来的元素。

---

@ViewChild 和 @ContentChild 在 Angular 中的应用提供了灵活性，使得父子组件之间的交互更加方便。理解它们之间的区别对于正确选择合适的装饰器来访问子组件或子元素至关重要。