在 Angular CDK 中将数据传入和传出 ComponentPortal

Question

我尝试使用在 找到的方法 但 PortalInjector 似乎已被弃用，没有关于在其位置做什么的实际说明。弃用警告声明为“改为使用 Injector.create”。有但没有如何或在哪里使用它或它实际上正在替换什么。

我也试过 Material's own Dialog component 想看看我是否能弄清楚他们是怎么做到的，但一无所获。

所以我再次提出问题 Angular 13:

如何将数据传入和传出使用 ComponentPortal() 创建的组件？如果答案是通用的，例如使用 Injector，您能给我指出一个示例或文档来说明如何这样做吗？一个 'hello world' 路过的注射器？

Answer 1

恕我直言，我们没有直接的方法来将我们做的事情作为来自 componentportal 的输入或输出。

你可以做的是使用门户的 attached 事件传递你想用作 @Input 的数据。

Check this demo code where we are passing value to Guest component.

<ng-template (attached)="onComponentRendering($event)" [cdkPortalOutlet]="guestPortal"></ng-template>

然后将其用作

 public onComponentRendering(ref): void {
    ref = ref as ComponentRef<any>;
    ref.instance['guestData'] = [ ...something];
 }

对于输出数据，您可以创建一个服务（使用 Subject）并使用它在组件之间进行通信。