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

Question

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

加载组件后，我想访问它的接口方法doSomething()，但是我似乎无法访问已加载的组件。

是否可以访问该组件？

类/接口：

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

html:

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

应用程序.ts

portal: Portal<any>;
...

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

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

portal: Portal<IPortalThing>;
...

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

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

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

我觉得令人费解。

score 5 · Accepted Answer

我找到了答案。

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

我们有几个选择：

活动

附加门户时，cdkPortalOutlet 会触发一个事件。我们可以像其他任何事件一样收听它。

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

操作指令

或者，我们可以完全删除 objectof portal ，而是直接关闭指令。

获取cdkPortalOutlet的@ViewChild，然后我们可以调用：

const instance = cdkPortalOutlet.attach(portal)

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

1 回答 1