Question

我的Angular 5应用程序中有一个组件包装了另一个组件，在包装组件的构造函数中，我想获得对被转换组件的引用。像这样：

<wrapper-component>
    <wrapped-component></wrapped-component>
</wrapped-component>

在我的wrapper-component中，我希望获得对wrapped-component的引用。实际上，我需要的只是对构造函数的引用，如下所示：

@Component({
    selector: 'wrapper-component'
    // ...
)}
export class WrapperComponent {
    getWrappedComponent( 
        // can this be done?
    )
}

我可以通过将wrapped-component作为输入传递给wrapper-component来考虑这样做的方法，但我不想这样做，因为有几个组件像这样包装而且我不会在我的包裹组件中拥有所有的样板。

有什么想法吗？

Answer 1

如果我已经很好地理解了这个问题，我认为你正在寻找 @ContentChild 装饰器。使用@ContentChild，您可以获取组件内部投影内容的实例，在本例中为WrapperComponent。您可以像这样使用它:(请记住，WrappedComponent引用将在 ngAfterContentInit 生命挂钩上可用，如示例所示）

@Component({
selector: 'wrapper-component'
// ...
)}
export class WrapperComponent {
    @ContentChild(WrappedComponent) wrappedComponent: WrappedComponent
    ngAfterContentInit() {
          // use wrapped component
          this.wrappedComponent. // whatever
    }
}

希望这有帮助。

在Angular 2+中使用转置时获取对组件的类/构造函数的引用

1 个答案: