angular - 从 CDK Overlay Portal 获取对组件的引用

Question

我正在使用一项服务，通过组件门户实例化 Angular Material CDK Overlays。

创建门户并将其附加到叠加层后，是否有任何方法可以访问门户创建的组件的组件引用？我希望能够从外部收听该组件的事件。例如:

const portal = new ComponentPortal(MyCoolComponent, /* ...etc */);
this.overlay.attach(portal);
// I'd like to be able to do something like...
// portal.MyCoolComponent.someEventEmitter.subscribe();

我已经搜索了文档和源代码，找不到实现它的方法。我可能不得不求助于将来自服务的回调注入(inject)到极其困惑的组件中。

有人知道怎么做吗？

Answer 1

OverlayRef.attach 方法返回一个 ComponentRef。 ComponentRef 有一个属性 instance，它是您的组件的一个实例。 ComponentRef 可以是通用的，因此您知道内部组件的类型。

参见 OverlayRef source code 中的第 60 行

attach<T>(portal: ComponentPortal<T>): ComponentRef<T>;

所以你可以在你的代码中做到这一点

const portal = new ComponentPortal(MyCoolComponent, ...etc);
const compRef: ComponentRef<MyCoolComponent> = this.overlay.attach(portal);

compRef.instance.someEventEmitter.subscribe();