Angular 2：如何动态创建 ViewContainerRef

Posted 2023-02-23

【中文标题】Angular 2：如何动态创建 ViewContainerRef

【英文标题】：Angular 2: How to dynamically create ViewContainerRef

【发布时间】：2017-03-13 13:26:42

【问题描述】：

我正在尝试创建能够显示任意模式的模式服务。 目前，为了创建动态组件，我在视图中为其存储占位符：

 <div #container></div>
 ...
 @ViewChild("dialogContainer", read: ViewContainerRef)
 dialogContainer:ViewContainerRef;

比创建组件：

let factory = this.componentResolver.resolveComponentFactory(Dialog);
this.componentReference = this.dialogContainer.createComponent(factory);

有没有办法将所有这些逻辑从组件移到服务中，并能够在主体或任何其他 DOM 元素中创建/删除视图容器？

【问题讨论】：

我需要像这样生成容器 ````` 并获取相应的 id viewcontainer 参考

我需要在多个动态容器中加载多个动态组件

检查：***.com/questions/36566698/…

你说的modal service是什么意思？在您提供的代码中，模板变量与 ViewChild 参数不匹配。我也看不出当前标题与问题中描述的问题有何关系。

【参考方案1】：

它不会创建 ViewContainerRef，但它可以帮助您动态创建一个弹出窗口作为单独的组件。

我为您创建了 plunker 示例，但我没有将其嵌入此处，因为 stackowerflow 代码 sn-p 不支持创建示例所需的所有功能 :) http://embed.plnkr.co/XFQAAHDAyrRAih3RTvHH/

【讨论】：

请将相关代码直接添加到问题中，而不是仅链接 Plunker。阻止 Plunker 链接本身是有原因的。

我也不明白这是如何回答这个问题的。

它确实解决了他的问题，因为我也有同样的问题。

对，没有正确阅读问题。问题实际上不是关于“如何动态创建 ViewContainerRef”。答案仍然没有直接包含相关的代码部分。

是的，但是当您查看主题的代码示例时，您可以看到他需要它来创建弹出窗口，我给了他能够解决他的问题的路径。