在Angular 13中,如果一个组件继承自另一个组件,那么它无法在它的模板中访问@ViewChild。这是因为@ViewChild无法跨越继承层级进行操作。为了解决这个问题,我们可以使用@ContentChild代替@ViewChild,因为@ContentChild可以跨越组件的传递进行访问。
下面是一个示例代码,在一个继承的组件中使用@ContentChild来访问父组件中的子组件:
父组件:
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
@ViewChild('myChild')
child: ChildComponent;
}
子组件:
@Component({
selector: 'app-child',
template: 'Child Component'
})
export class ChildComponent {}
继承组件:
@Component({
selector: 'app-inherited',
template: `
Inherited Component
`
})
export class InheritedComponent extends ParentComponent {
@ContentChild(ChildComponent)
child: ChildComponent;
}
在这个例子中,@ViewChild被替换为了@ContentChild,并且它访问了ParentComponent中的子组件。这个解决方案可以解决继承组件无法访问@ViewChild的问题。