从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();

我已经搜索过文档和来源，找不到办法做到这一点。我可能不得不求助于从服务中注入一个非常混乱的组件回调。

有谁知道怎么做？

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();