web-dev-qa-db-ja.com

Angular CDKオーバーレイ、デフォルトのオーバーレイコンテナを変更

OverlayContainerを変更する方法はありますか？

ツールチップコンポーネントを作成しましたが、オーバーレイを特定の要素に添付したい場合があります（デフォルトでは、オーバーレイはドキュメントの本文に添付されます）。

これが私がオーバーレイを作成する方法です：

  private initOverlay(): void {
    const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo(this.elementRef)
      .withPositions([this.resolvedConfig]);

    this.overlayRef = this.overlay.create({positionStrategy});
  }

そして、これは私がそれにテンプレートを添付する方法です：

  show(): void {
    this.overlayRef.attach(new TemplatePortal(this.tpl, this.viewContainerRef));
  }
javascriptangularangular-materialcdk
4
vlio20

このstackblitzの例を参照してください。

_app.module.ts_の以下を介してOverlayContainerクラスを拡張することでこれを達成できるように見えます

{ provide: OverlayContainer, useFactory: () => new AppOverlayContainer() }

Stackblitz

https://stackblitz.com/edit/angular-material2-issue-ansnt5?file=app%2Fapp.module.ts

このGitHubコメントは、これをdirectiveにパッケージ化する方法の例も提供します

GitHubコメント

https://github.com/angular/material2/issues/7349#issuecomment-33751304

改訂3/22/19作業指令の例

_cdk-overlay-container.ts_を介してOverlayContainerクラスを拡張します

_app.module.ts_でクラスをスタブします

_  providers: [
    { provide: OverlayContainer, useClass: CdkOverlayContainer },
  ]
_

_cdk-overlay-container.ts_で、デフォルトの_createContainer()が機能しないようにし、独自のカスタムパブリックメソッドmyCreateContainerを提供して、それを置き換えます。

基本的に、ここで空のdivを作成し、カスタムクラスを_my-custom-overlay-container-class_に追加して、ディレクティブがアタッチされているdivに追加し、そのコンテナーを真のOverlayContainerクラスのプライベート変数__containerElement_に渡します。

_/**
* Create overlay container and append to ElementRef from directive
*/ 
public myCreateContainer(element: HTMLElement): void {
   let container = document.createElement('div');
   container.classList.add('my-custom-overlay-container-class');

   element.appendChild(container);
   this._containerElement = container;
 }
 /**
  * Prevent creation of the HTML element, use custom method above
  */
 protected _createContainer(): void {
     return;
 }
_

次に、_cdk-overlay-container.directive.ts_でmyCreateContainer()を呼び出し、ElementRefを引数として渡します。

_ this.cdkOverlayContainer['myCreateContainer'](this.elementReference.nativeElement);
_

次に、HTMLで、ディレクティブを表示する場所に割り当てます。

_<div myCdkOverlayContainer 
_

Stackblitz

https://stackblitz.com/edit/angular-material2-issue-6nzwws?embed=1&file=app/app.component.html

6
Marshal