gpt4 book ai didi

Angular2 渲染组件到主体

转载 作者:太空狗 更新时间:2023-10-29 17:09:45 25 4
gpt4 key购买 nike

假设我有一个 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> 的模板内相反?

谢谢!

最佳答案

你可以做到,但它很复杂。

  1. 将您的动态组件添加到模块 declarationsentryComponents
  2. 获取对根 ViewContainerRef 的引用,将其注入(inject)您的应用程序组件。
  3. 获取对 ComponentFactoryResolver 的引用,同样使用注入(inject)。
  4. 使用这样的东西:

    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);
  5. 删除组件:

    cmpRef.destroy();

关于Angular2 渲染组件到主体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39137268/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com