首页 文章

Angular2将组件渲染到body

提问于
浏览 次
9

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

也许我可以在 <my-button> 内完全定位 <my-menu> 以实现所需的定位 . 但也许我不能，因为我在一个包含元素上有 overflow:hidden ，这将剪辑 <my-menu> . 所以我需要在 <body> 中渲染 <my-menu> 并将其绝对定位到 <my-button> .

有没有办法将 <my-menu> 呈现为 <body> ，即使它被放置在 <my-button> 的模板中？

谢谢！

angular

4 回答

  • 1

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

    您需要做的就是拥有一个viewContainerRef实例并使用编译器随时更新它 .

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

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

    Load Components Dynamically

    回复于
  • 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();
    回复于
  • 1

    是的你可以 . 既然你没有't provide code, I can' t给你一个更新的例子 . 但是，当我构建模态系统时，我使用它作为基础：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

    回复于
  • 7

    不，没有 .

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

    关于动态创建组件作为 AppComponent 的兄弟的一些讨论在https://github.com/angular/angular/issues/9293中进行了讨论，但不清楚它是否，如何或何时可能落地 .

    回复于

相关问题