Question

假设我有一个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

你可以这样做，但它很复杂。

将您的动态组件添加到模块declarations和entryComponents
获取对您的应用程序组件注入的根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);

删除组件：
```
cmpRef.destroy();
```

Answer 2

不，没有。

您可以在AppComponent之外引导组件，并使用共享服务进行通信。

在https://github.com/angular/angular/issues/9293中讨论了有关动态创建组件作为AppComponent兄弟的讨论，但目前尚不清楚它是否，如何或何时落地。

Answer 3

是的，你可以。由于您没有提供代码，我不能给您一个更新的示例。但是，当我构建模态系统时，我将其用作基础：https://github.com/shlomiassaf/angular2-modal

当我们最初将其拉入时，它不是非常可重用，但有一种方法可以通过ApplicationRef获取根节点。（这是围绕Angular 2 beta 8。）

这绝对可行。

更新：您可以使用ApplicationRef获取要注入的位置，并使用DynamicComponentLoader注入新组件。使用以下行作为hostLocation（DynamicComponentLoader的loadIntoLocation方法中的第二个参数），将元素放在html中的app组件之后：

this.appRef['_rootComponents'][0].location

appRef是对ApplicationRef的引用，它被传递到我的组件的构造函数中。

您可以使用测试版.8之后出现的其他元素或方法来获得您想要的效果。

这是另一个包含大量示例的好网站：https://medium.com/tixdo-labs/angular-2-dynamic-component-loader-752c3235bf9#.x913qdh4u

Answer 4

如果要有条件地加载组件，可以使用ComponentResolverFactory。

您需要做的就是拥有一个viewContainerRef实例＆amp;使用编译器随时随地更新它。

我建议为要动态加载的所有组件创建一个单独的模块。异步加载它们。

也许低于答案可以更好地帮助你。

Load Components Dynamically

Angular2将组件渲染到body

4 个答案: