如何將兒童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的不同部分

回答

相關問題