Angular 中 @ViewChild 与 @ContentChild 的区别

概述

在组件交互中，组件之间的镶嵌一般有两种方式：

在这两种情况下，如果我们需要访问子组件的公开属性或方法，就需要使用 @ViewChild 与 @ContentChild 装饰器了。他们依次代表上面的两种情况，具体使用如下。

实例

对于第一种（@ViewChild()）：

// template<app-list></app-list>// ts// 父组件@Component({    selector: 'app-list',    // 子组件，定义在组件内    template: `        <app-list-item></app-list-item>    `})export class ListComponent implements OnInit {    // 通过 @ViewChild 装饰器声明子组件    @ViewChild(TreeListComponent) listItem: TreeListComponent;    // 在 OnInit 阶段获取子组件的实例    ngOnInit() {        // 即这里可以使用子组件实例公开的变量与方法        console.log(this.listItem);    }}

第二种形式（@ContentChild()）：

// template<app-list>    <app-list-item></app-list-item></app-list>// ts// 父组件@Component({    selector: 'app-list',    // 子组件，通过投影方式嵌入    template: `        <ng-content></ng-content>    `})export class ListComponent implements OnInit {    // 通过 @ContentChild 装饰器声明嵌入的组件    @ContentChild(TreeListComponent) listItem: TreeListComponent;    // 在 OnInit 阶段获取子组件的实例    ngOnInit() {        // 即这里可以使用嵌入的组件实例公开的变量与方法        console.log(this.listItem);    }}

注意：如果需要子组件的实例，需在 OnInit 阶段及之后才能获取到。