如何在[cdkPortalOutlet]中访问组件参考

Question

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

一旦我加载了该组件，我想访问它的接口方法 doSomething（），但是我似乎无权访问已加载的组件。

>

可以访问此组件吗？

---

类/接口：

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

HTML：

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

App.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>'.

我感到困惑。

Answer 1

我找到了答案。

通过在cdkPortalOutlet中设置参数，设置完后，我们将无权访问返回的实例。

我们有两个选择：

事件

连接门户网站后，

cdkPortalOutlet会触发事件。我们可以像其他任何事件一样听它。

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

操纵指令

或者，我们可以完全删除门户的对象，而直接在指令之外工作。

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

const instance = cdkPortalOutlet.attach(portal)

---

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