Angular CDK Overlay，更改默认覆盖容器

Question

有没有办法改变 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));
  }

Answer 1

请参考这个 stackblitz 示例。

looks like you can accomplish this by extending the OverlayContainer class via the following in 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 工作指令示例

通过 cdk-overlay-container.ts

扩展 OverlayContainer class

在 app.module.ts

中添加 class

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

在您的 cdk-overlay-container.ts 中，您正在阻止默认 _createContainer() 工作，并提供您自己的自定义 public 方法 myCreateContainer 来替换它。

You are essentially creating an empty div here, adding a custom class to it my-custom-overlay-container-class and appending it to the div the directive is attached to, then passing that container to the private variable _containerElement in the true OverlayContainer class.

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

Angular CDK Overlay，更改默认覆盖容器

Angular CDK Overlay, change default overlay container

javascript

angular-material

angular

angular-cdk