Angular CDK Overlay, изменить контейнер по умолчанию для оверлея - PullRequest
Новая
       21

Angular CDK Overlay, изменить контейнер по умолчанию для оверлея

2 голосов
/ 21 марта 2019

Есть ли способ изменить 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));
  }

1 Ответ

1 голос
/ 22 марта 2019

Пожалуйста, обратитесь к этому примеру со стеком.

похоже, что вы можете сделать это, расширив OverlayContainer класс с помощью следующего в app.module.ts

{ 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-337513040

Редакция 3/22/19, пример рабочей директивы

Расширить класс OverlayContainer с помощью cdk-overlay-container.ts

Заглушка класса в app.module.ts

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

В вашем cdk-overlay-container.ts вы запрещаете работу по умолчанию _createContainer() и предоставляете свой собственный открытый метод myCreateContainer для его замены.

Вы по сути создаете здесь пустой div, добавляете в него собственный класс my-custom-overlay-container-class и добавляете его в div директива присоединяется, затем передает этот контейнер закрытая переменная _containerElement в истинном OverlayContainer класс. 

/**
* 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

...