概述 在组件交互中，组件之间的镶嵌一般有两种方式：
在创建父组件时将子组件直接写在模版中。 子组件通过投影方式嵌入父级组件，通过 ng-content 形式。 在这两种情况下，如果我们需要访问子组件的公开属性或方法，就需要使用 @ViewChild 与 @ContentChild 装饰器了。他们依次代表上面的两种情况，具体使用如下。
实例 对于第一种（@ViewChild()）：
// template
// 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);
}
} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 第二种形式（@ContentChild()）：
// template
// 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);
}
}
