@ContentChild装饰器用于从父组件的模板中查询指定的子组件或指令,并将其注入到父组件中。它有一个可选的令牌参数,可以用于细化查询以获取所需的子组件或指令。
当令牌作为参数传递给@ContentChild时,Angular会查找具有该令牌的一个或多个子组件或指令,并将其注入到父组件中。可以通过以下代码示例进行演示:
// 子组件
@Component({
selector: 'app-child',
template: '
// 父组件
@Component({
selector: 'app-parent',
template: '
ngAfterContentInit(): void { console.log(this.child.token); // 输出令牌 } }
在上面的示例中,父组件使用@ContentChild装饰器检索ChildComponent,并打印它的token属性。
解析:上述代码示例中,可以看到父组件使用@ContentChild装饰器来注入子组件,并传递一个令牌参数。ChildComponent具有一个token属性,用于存储令牌的值。在AfterContentInit钩子函数中,可以访问child属性,即表示从ng-content查询得到的ChildComponent实例,从而访问子组件的token属性。