Question

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

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

Answer 1

我可以做一些事情：创建一个dom元素，追加它到了身体，然后呈现角度成分作为那个dom的孩子元件？

是的，你可以这样做。您需要使弹出组件动态化并在创建时传递DOM元素。您还需要将结果视图附加到ApplicationRef.views。这种方法类似于@angular/material CDK is using。

以下是stackblitz demo和代码：

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);
      })
  }
}

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

Here is what you need to know about dynamic components in Angular

Answer 2

如果你绝对需要它是身体的孩子，特别是身体的孩子，那么我认为Angular的Renderer2 API是你应该看的地方。我没有多少经验。

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

Answer 3

我认为最好的解决方案是将日期选择器弹出组件包含在父组件中。您向父级show-popup添加布尔属性，并将此属性作为@Input [show-popup]="show-popup"传递给date-picker-popup组件。

在您的父级中，您实现了两个函数，第一个用于焦点事件以设置show-popup = true，第二个用于焦点事件以设置show-popup = false。

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

如何将子angular2组件插入dom

3 个答案: