Angular2将组件渲染到body

Question

Angular2将组件渲染到body

假设我有一个Angular2组件,<my-button>并且我想在单击按钮时显示的下拉菜单中为要渲染的选项提供输入.我有菜单组件<my-menu>,<my-button>如果有传入选项,它会在模板中有条件地呈现.

也许我可以绝对定位<my-menu>,<my-button>以实现所需的定位.但也许我不能因为我有overflow:hidden一个包含元素而且会剪辑<my-menu>.所以不是我需要呈现<my-menu>的<body>,它完全定位到<my-button>.

有没有办法渲染<my-menu>到<body>即使它被放置在模板内<my-button>呢？

谢谢!

Answer 1

kem*_*sky 7

你可以这样做,但它很复杂.

将动态组件添加到模块declarations和entryComponents
获取对root的引用,ViewContainerRef将其注入应用程序组件.
参考ComponentFactoryResolver,也使用注射.

使用这样的东西:

private resolverFactory:ComponentFactoryResolver;
private viewContainer:ViewContainerRef;

var compFactory:ComponentFactory<Frame> = this.resolverFactory.resolveComponentFactory(Frame);

var cmpRef:ComponentRef<Frame> = this.viewContainer.createComponent(compFactory, this.viewContainer.length);

Run Code Online (Sandbox Code Playgroud)

删除组件:
```
cmpRef.destroy();
```
Run Code Online (Sandbox Code Playgroud)

Answer 2

Gün*_*uer 1

不，没有。

您可以在您的外部引导一个组件AppComponent并使用共享服务进行通信。

https://github.com/angular/angular/issues/9293AppComponent中讨论了一些关于动态创建同级组件的讨论，但尚不清楚是否、如何或何时会实现。

归档时间：	9 年，1 月前
查看次数：	4985 次
最近记录：	8 年，2 月前