Angular 2 : How to dynamically create ViewContainerRef

标签 angular components

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

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

然后创建组件:

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

有没有办法将所有这些逻辑从组件移到服务中,并能够在 body 或任何其他 DOM 元素中创建/删除 View 容器?

最佳答案

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

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

关于 Angular 2 : How to dynamically create ViewContainerRef,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40342587/

相关文章:

javascript - 健壮、成熟、可扩展的(JavaScript)数据网格?

javascript - 丢弃传递给 React 组件的剩余属性是一个错误吗?

angular - Chrome 不更新标题

angular - 动态更改 img [src]

Angular 2 和 .NET Web API 身份验证

angular - patchValue 设置值并禁用该字段

delphi - Delphi主从网格组件

Java Paint 组件转换成位图

css - Angular 2 : Update all color assignments in CSS dynamically

Angular 4 - 获取输入值