介绍
在 Angular 中，我们经常需要在一个组件中使用另一个组件，这时候就需要在模板中将组件嵌套进去。但是，有时候我们需要在父组件中对子组件进行一些控制，比如改变子组件的样式、修改子组件的属性等。这时候，我们可以使用 Angular 提供的 ContentChild 和 ContentChildren 来实现对模板中组件的动态控制。
ContentChild 和 ContentChildren
ContentChild 和 ContentChildren 都是 Angular 提供的装饰器，用来获取模板中的子组件。它们的区别在于：
- ContentChild 只会选择模板中第一个匹配的子组件。
- ContentChildren 会选择模板中所有匹配的子组件，并将它们存储在一个 QueryList 中。
这两个装饰器通常用在父组件中，用来获取模板中的子组件，并对它们进行控制。
示例
假设我们有一个父组件和一个子组件，父组件需要控制子组件的样式和属性。可以通过以下步骤实现：
- 在子组件中定义一个属性或方法，用来接收父组件传递过来的值。比如，我们可以在子组件中定义一个名为
isDisabled的属性，用来接收父组件传递过来的禁用状态。
// javascriptcn.com 代码示例
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<button [disabled]="isDisabled">Click me</button>
`
})
export class ChildComponent {
@Input() isDisabled: boolean;
}- 在父组件中使用 ContentChild 或 ContentChildren 装饰器，获取子组件的引用。假设我们使用 ContentChild 装饰器来获取子组件的引用：
// javascriptcn.com 代码示例
import { Component, ContentChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
<ng-content></ng-content>
`
})
export class ParentComponent {
@ContentChild(ChildComponent) child: ChildComponent;
}这里我们使用了 ng-content 来插入子组件，这样父组件就可以获取到子组件的引用了。
- 在父组件中修改子组件的属性或样式。假设我们需要将子组件禁用，可以通过以下代码实现：
// javascriptcn.com 代码示例
import { Component, ContentChild } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
<ng-content></ng-content>
`
})
export class ParentComponent {
@ContentChild(ChildComponent) child: ChildComponent;
disableChild() {
this.child.isDisabled = true;
}
}这里我们定义了一个名为 disableChild 的方法，用来将子组件禁用。在方法中，我们直接修改了子组件的 isDisabled 属性，这样子组件就会被禁用了。
总结
ContentChild 和 ContentChildren 是 Angular 中用来获取模板中子组件的装饰器，它们可以帮助我们实现对模板中组件的动态控制。在使用 ContentChild 和 ContentChildren 时，需要注意它们的区别，并且需要注意子组件的生命周期。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65684f6ad2f5e1655d117f09