Angular CDK Overlay，更改默认覆盖容器 [英] Angular CDK Overlay, change default overlay container

问题描述

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

解决方案

请参考这个 stackblitz 示例.

<块引用>

看起来您可以通过扩展OverlayContainer 类通过 app.module.ts

中的以下内容

{ 提供:OverlayContainer，useFactory:() =>new AppOverlayContainer() }

Stackblitz

https://stackblitz.com/编辑/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类

在 app.module.ts

中存根类

 提供者:[{ 提供: OverlayContainer, useClass: CdkOverlayContainer },]

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

<块引用>

您实际上是在此处创建一个空的 div，向其添加自定义类 my-custom-overlay-container-class 并将其附加到div 指令附加到，然后将该容器传递给真正的OverlayContainer中的私有变量_containerElement班级.

/*** 创建覆盖容器并从指令追加到 ElementRef*/公共 myCreateContainer(元素:HTMLElement):无效{let container = document.createElement('div');container.classList.add('my-custom-overlay-container-class');element.appendChild(容器);this._containerElement = 容器；}/*** 防止创建 HTML 元素，使用上面的自定义方法*/受保护的_createContainer():无效{返回;}

然后在您的 cdk-overlay-container.directive.ts 中调用 myCreateContainer() 并将 ElementRef 作为参数传递.

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

然后在您的 HTML 中指定您希望它显示的指令.

Stackblitz

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

Is there a way to change the OverlayContainer?

I have created a tooltip component, but sometimes I want to attach the overlay to a specific element (by default the overlay is attached to the document body).

Here is how I am creating the overlay:

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

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

And this is how I am attaching a template to it:

  show(): void {
    this.overlayRef.attach(new TemplatePortal(this.tpl, this.viewContainerRef));
  }

解决方案

Please reference this stackblitz example.

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

---

This GitHub comment also provides an example of how to package this in a directive

GitHub comment

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

---

Revision 3/22/19 working directive example

Extend the OverlayContainer class via cdk-overlay-container.ts

Stub the class in app.module.ts

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

In your cdk-overlay-container.ts you are preventing the default _createContainer() from working, and providing your own custom public method myCreateContainer to replace it.

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;
 }

Then in your cdk-overlay-container.directive.ts your are calling myCreateContainer() and passing the ElementRef as an argument.

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

Then in your HTML assign the directive where you want it to show up.

<div myCdkOverlayContainer 

Stackblitz

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

这篇关于Angular CDK Overlay，更改默认覆盖容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！