在组件交互中,组件之间的镶嵌一般有两种方式:
ng-content
形式。
在这两种情况下,如果我们需要访问子组件的公开属性或方法,就需要使用 @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 阶段及之后才能获取到。
我公司也是用的angular7
很孤单
不行,应该要孤傲
加我微信 yutao520u 如果可以的话