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

【问题标题】：Passing data to and from a ComponentPortal in Angular CDK在 Angular CDK 中将数据传入和传出 ComponentPortal
【发布时间】：2021-12-12 02:16:21
【问题描述】：

我尝试使用Angular CDK: How to set Inputs in a ComponentPortal 的方法但是PortalInjector 似乎已被弃用，没有关于如何代替它的实际说明。弃用警告状态为“改用Injector.create”。有但不知道如何或在哪里使用它或它实际替换了什么。

我也试着绕开Material's own Dialog component 看看我是否能弄清楚他们是如何做到的，但什么也没有。

所以我再次为 Angular 13 提出问题：

如何将数据传入和传出使用ComponentPortal() 创建的组件？如果答案是通用的，例如使用注射器，您能否指出一个示例或有关如何执行此操作的文档？传递 Injector 的“hello world”？

【问题讨论】：

标签： javascript angular typescript angular-cdk

【解决方案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）并使用它在组件之间进行通信。

【讨论】：