如何将子angular2组件插入dom的不同部分

我正在处理一个日期选择器组件，希望日期选择器弹出窗口是body元素的子元素。日期选择器组件当前呈现一个输入元素，并在聚焦输入时显示一个与输入同级的弹出窗口。因为这个组件在很多地方使用，所以父元素的css规则会导致很多问题。我们遇到了溢出问题、动画问题、转换问题。我想将弹出窗口移动到body元素的子元素，以避免这些问题。然而，为了使该组件易于使用，我不想创建一个单独的日期选择器弹出组件，该组件需要包含在应用程序的其他地方

---

我可以按照以下方式做一些事情：创建一个dom元素，将其附加到主体中，然后将一个角度组件作为该dom元素的子元素进行渲染吗？

如果您绝对需要它成为主体的子元素，特别是主体，那么我认为应该查看角度组件。我在这方面没有多少经验

---

否则，如果您有整个项目的父组件，比如app.component，为什么不将日期选择器组件放在那里呢？使用事件发射器从子组件切换到应用程序组件（父组件），显示日历，将结果/数据发送到共享服务

我认为最好的解决方案是将日期选择器弹出组件包含到父组件中。将布尔属性添加到父级，

show popup

，并将此属性作为

@Input

：

[show popup]=“show popup”

传递给日期选择器弹出组件

在父级中，您实现了两个功能，第一个在焦点事件上设置

show popup=true

，第二个在focusout事件上设置

show popup=false

根据此属性的值，您可以更改css样式以显示/隐藏日期选择器弹出窗口

我可以按照以下方式做一些事情：创建一个dom元素，附加它吗 到主体，然后将角度组件渲染为该dom的子级 元素

是的，你能做到。您需要使弹出组件动态化，并在创建它时传递DOM元素。您还需要将结果视图附加到ApplicationRef.views。这种方法类似于什么

以下是程序和代码：

import { Component, ComponentFactoryResolver, Injector, Inject, Renderer2, ApplicationRef } from '@angular/core';
import { PopupComponent } from './popup.component';
import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

  constructor(
    resolver: ComponentFactoryResolver, 
    injector: Injector, 
    @Inject(DOCUMENT) document,
    renderer: Renderer2,
    appRef: ApplicationRef) {
      setTimeout(()=>{
        const element = renderer.createElement('div');
        renderer.appendChild(document.body, element);
        const factory = resolver.resolveComponentFactory(PopupComponent);
        const compRef = factory.create(injector, [], element);
        appRef.attachView(compRef.hostView);
      })
  }
}

要了解有关动态组件的更多信息，请阅读：