Angular 如何访问[cdkPortalOutlet]中的组件引用

我正在实现Angular的CDK门户来加载动态组件。 我能够使用给定的html和app.ts快速、轻松地将组件加载到页面上

加载组件后，我想访问它的接口方法doSomething（），但似乎无法访问已加载的组件

是否可以访问此组件？

---

类/接口：

interface IPortalThing {
    doSomething(){...}
}
class PortalThingComponent
class OtherPortalComponent

<ng-template [cdkPortalOutlet]="portal"></ng-template>

Html:

interface IPortalThing {
    doSomething(){...}
}
class PortalThingComponent
class OtherPortalComponent

<ng-template [cdkPortalOutlet]="portal"></ng-template>

应用程序ts

portal: Portal<any>;
...

loadComponent() {
    this.portal =  new ComponentPortal(PortalThingComponent));
}

portal:portal；
...
loadComponent（）{
this.portal=新组件门户（PortalThingComponent））；
}

---

我试图通过以下方式给出类型指示：

portal: Portal<IPortalThing>;
...

loadComponent() {
    this.portal =  new ComponentPortal<IPortalThing>(PortalThingComponent));
}

portal:portal；
...
loadComponent（）{
this.portal=新组件门户（PortalThingComponent））；
}

但是，由于以下错误，这样做使我无法设置我的this.portal：

Type 'ComponentPortal<IPortalThing>' is not assignable to type Portal<IPortalThing>'.

类型“ComponentPortal”不可分配给类型“Portal”。

这让我感到困惑。

我找到了答案

通过将参数设置为cdkPortalOutlet，我们无法在设置后访问返回的实例

我们还有两个选择：

事件

portal: Portal<any>;
...

loadComponent() {
    this.portal =  new ComponentPortal(PortalThingComponent));
}

cdkPortalOutlet在连接门户时触发事件。我们可以像听其他活动一样来听

<ng-template (attached)="recieveReference(ref)" [cdkPortalOutlet]="portal"></ng-template>

---

第二个选项对我来说更有意义，因为我可以更同步地处理代码。

我找到了答案

通过将参数设置为cdkPortalOutlet，我们无法在设置后访问返回的实例

我们还有两个选择：

事件

portal: Portal<any>;
...

loadComponent() {
    this.portal =  new ComponentPortal(PortalThingComponent));
}

cdkPortalOutlet在连接门户时触发事件。我们可以像听其他活动一样来听

<ng-template (attached)="recieveReference(ref)" [cdkPortalOutlet]="portal"></ng-template>

---

---

第二个选项对我来说更有意义，因为我可以更同步地处理代码。

你能分享模板吗？你能分享模板吗？