如何动态地将内容传递给 ComponentPortal 以由 cdkPortalOutlet 呈现？答案

【问题标题】：How to dynamically pass content to ComponentPortal to be rendered by cdkPortalOutlet?如何动态地将内容传递给 ComponentPortal 以由 cdkPortalOutlet 呈现？
【发布时间】：2020-01-08 16:26:03
【问题描述】：

我有 Angular CDK Portals 工作，就我可以动态创建一个门户组件，将它附加到 cdkPortalOutlet，并让它呈现现有模板，但我不知道如何提供该门户- 带有数据的组件。

在找到 CDK 门户之前，我遵循 Dynamic Component Loader 上的 Angular 指南，其中介绍了手动创建自定义准门户系统并设置 @Input 装饰器以接受您的数据，但我找不到任何关于CDK 门户中的类似功能/能力。

我也尝试关注这篇 Angular-in-Depth 文章，但它似乎也在很大程度上重新发明了 CDK 门户。

我看到了一些关于“上下文”和 EmbeddedViewRef 的讨论，但我没有找到足够的信息来说明它们的实际作用或它们的实际使用方式（至少，不足以对我的目前的理解水平）。

除了将数据抓取代码直接放在每个门户组件中之外，如何在门户动态创建之前将数据动态传递给门户组件？我在哪里可以找到更多信息：PortalComponent“上下文”或 EmbeddedViewRef，如果我需要其中任何一个？

【问题讨论】：

标签： angular angular-cdk

【解决方案1】：

我必须实现一次动态组件（我不知道您是否面临与我相同的问题），我发现这个包对我来说是最好的。看看吧：

https://www.npmjs.com/package/ng-dynamic-component

有了这个库，你可以像这样绑定数据：

<ndc-dynamic
  [ndcDynamicComponent]="component"
  [ndcDynamicInputs]="inputs"
  [ndcDynamicOutputs]="outputs"
></ndc-dynamic>

【讨论】：

感谢您的链接，def 看起来可以解决我的问题。我将把这个问题留一点，因为我特别感兴趣的是如何通过 cdk Portals API 来完成，但是如果没有人咬“接受的答案”应该是你的：P