私は日付選択コンポーネントで作業しており、日付ピッカーのポップアップをbody要素の子にしたいと考えています。現在、日付ピッカーコンポーネントは入力要素をレンダリングし、入力がフォーカスされているときに入力に兄弟であるポップアップを表示します。このコンポーネントは多くの場所で使用されているので、親要素のCSS規則は多くの問題を引き起こします。オーバーフロー、アニメーションの問題、変換の問題などがありました。これらの問題を回避するために、ポップアップをbody要素の子に移動したいと思います。しかし、コンポーネントを使いやすくするために、別の日付ピッカーポップアップコンポーネントを作成する必要はありません。このコンポーネントは、アプリケーションのどこかに追加する必要があります。dom2の別の部分に子のangle2コンポーネントを挿入する方法
dom要素を作成し、それを本体に追加してから、そのdom要素の子要素としてレンダリングすることができますか？
私はの線に沿って何かを行うことができます。そのDOM 要素の子として角度成分をレンダリングし、身体に にそれを追加し、DOM要素を作成しますか？
はい、できます。ポップアップコンポーネントを動的に作成し、作成するときにDOM要素を渡す必要があります。また、結果のビューをApplicationRef.viewsに添付する必要があります。このアプローチは、@angular/material CDK is usingと似ています。読み
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);
})
}
}
が動的コンポーネントについて詳しく知ることができます：
ここはstackblitz demoとコードです
身体の子供、具体的には身体の子供であることが絶対に必要な場合は、角度のRenderer2 APIが必要です。私はそれに多くの経験がありません。
それ以外の場合は、app.componentのようにプロジェクト全体の親コンポーネントがある場合は、そこに日付ピッカーコンポーネントを置くのはなぜですか？イベントエミッタを使用して、子コンポーネントからアプリケーションコンポーネント（親）に切り替え、カレンダーを表示し、結果/データを共有サービスに送信します。
あなたの親コンポーネントに日付ピッカーポップアップコンポーネントを含めることをお勧めします。あなたの親にブール値プロパティーshow-popupを追加し、このプロパティーを@Input：[show-popup]="show-popup"というように日付ピッカーポップアップコンポーネントに渡します。
親では、フォーカスイベントには最初にshow-popup = trueを設定し、フォーカスアウトイベントにはshow-popup = falseを設定する2つの機能を実装します。
このプロパティの値によって、cssスタイルがdate-picker-popupの表示/非表示に変更されます。