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

我正在使用日期选取器组件，并希望date-picker弹出框是body元素的子项。日期选择器组件当前呈现输入元素，并在输入焦点时显示与输入同级的弹出窗口。因为这个组件在许多地方使用，所以父元素的css规则会导致很多问题。我们遇到了溢出问题，动画问题，转换问题。我想将弹出窗口移动到body元素的子元素以避免这些问题。但是，为了让组件易于使用，我不想创建一个单独的日期 - 选择器 - 弹出组件，以便将该需求包含在应用程序中的其他位置。如何将儿童angular2组件插入dom的不同部分

我可以做些什么：创建一个DOM元素，将其附加到正文，然后呈现一个角度组件作为该DOM元素的孩子？

来源

2017-10-11 alexwells

我可以做线沿线的东西：创建一个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

来源

2017-10-11 16:56:04

如果你绝对需要它是身体的一个孩子，特别是身体，那么我认为Angular的Renderer2 API是你应该看的地方。我没有太多的经验。否则，如果您有整个项目的父组件，比如app.component，那么为什么不只是在那里放置日期选择器组件呢？使用事件发射器从子组件切换到应用程序组件（父级），显示日历，将结果/数据发送到共享服务。

来源

2017-10-11 15:34:20 Everett

我认为最好的解决方案是将你的日期选择器弹出组件包含到你的父组件。您将一个布尔属性添加到您的父项show-popup，并且您将此属性作为@Input：[show-popup]="show-popup"传递给日期选取器弹出组件。

在你父母身上，你实现了两个功能，第一个在焦点事件上设置show-popup = true，第二个在焦点事件上设置show-popup = false。

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

来源

2017-10-11 15:40:49

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

回答

相关问题