Question

我试图创建一个插件，它将一个组件作为参数，并在body标签的末尾呈现其内容。就像使用jQuery的插件一样。

@Component({
    selector: 'some-selector',
    template: 'This is FirstComponent'
})
class FirstComponent{}

@Component({
    selector: 'app',
    template: 'The root component'
})
class AppComponent{
    // ImaginaryModalOpener is what i want to achieve.
    // a standalone function that can take a component and render it in dom    
    // at the bottom of the body tag
    ImaginaryModalOpener(FirstComponent);
}

我已经看到很多关于渲染动态组件的stackoverflow问题，但是他们在根组件中使用指令或HTML标记开始。在我的例子中，Root模板没有ImaginaryModalOpener的指令或组件。

请指出我是否错过了什么。

Answer 1

从ViewContainerRef how to get root viewContainerRef of angular2 aplication

获取AppComponent

并向此ViewContainerRef添加一个组件，例如Angular 2 dynamic tabs with user-click chosen components

中显示的内容

添加的组件将作为兄弟添加到AppComponent。如果AppComponent是<body>的孩子，则动态添加的组件也将是<body>的孩子。

Answer 2

您可以根据需要从Renderer2创建RendererFactory2并将其添加到document.body中。

我需要为第三方跟踪API添加一个iframe，当用户进行购买时，我需要在页面上放置一个iframe。因此，此示例从逻辑上讲属于服务而不是组件-恰好发生在实现中，导致添加了DOM元素。

注入这些（即使providerIn: 'root'也可以）：

 private rendererFactory: RendererFactory2,
 @Inject(DOCUMENT) private document: Document

然后创建一个iFrame：

createIFrame(url: string)
{
    const iframe: HTMLIFrameElement = document.createElement('iframe');
    iframe.src = url;
    iframe.width = '100';
    iframe.height = '100';
    iframe.frameBorder = '1';

    const renderer = this.rendererFactory.createRenderer(null, null);
    renderer.appendChild(this.document.body, iframe);
}

就是这样。不会弄乱AppComponent或ViewReference等。-这基本上只是Angular形式的纯Javascript。

Angular2 - 按需呈现组件并附加在正文中

2 个答案: