Как настроить Overlay | Angular Material, чтобы он реагировал на блоки с прокруткой внутри?

Изображение к вопросу
  • 30 августа 2023 г. 9:56
Ответы на вопрос 1
Для того чтобы Overlay из Angular Material реагировал на блоки с прокруткой внутри, вам нужно использовать CDK Scrollable. 

1. Установите необходимые пакеты, выполнив следующую команду:
```
npm install @angular/cdk @angular/material
```

2. Импортируйте необходимые модули в вашем Angular-модуле:
```typescript
import { ScrollingModule } from '@angular/cdk/scrolling';
import { OverlayModule } from '@angular/cdk/overlay';
import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    ScrollingModule,
    OverlayModule,
    MatTooltipModule
  ],
})
export class AppModule { }
```

3. Создайте overlay:
```typescript
import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

@Component({
  selector: 'app-example',
  template: `
    <div style="height: 300px; overflow-y: auto;" #scrollContainer>
      <div style="height: 500px;">Scrollable content</div>
      <button mat-raised-button (click)="showOverlay($event)">Show Overlay</button>
    </div>
  `,
})
export class ExampleComponent {
  constructor(
    private overlay: Overlay,
    private viewContainerRef: ViewContainerRef
  ) {}

  showOverlay(event: MouseEvent) {
    const target = event.target as HTMLElement;
    const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(target)
      .withDefaultOffsetX(5)
      .withDefaultOffsetY(5);
      
    const overlayRef = this.overlay.create({
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.reposition(),
      hasBackdrop: true,
    });

    overlayRef.attach(new ComponentPortal(YourComponent, this.viewContainerRef));
  }
}
```

4. Ваш Tooltip или другой Overlay-компонент должен быть вставлен в cdk-overlay-pane, который является потомком компонента, содержащего блок с прокруткой (scrollContainer):
```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    <div cdk-overlay-pane>
      Tooltip content
    </div>
  `,
})
export class YourComponent {}
```

Теперь Overlay будет перемещаться вместе с блоками с прокруткой внутри.

Что касается тултипа, который не перемещается при прокрутке, это может быть связано с некоторыми стилями или с настройками Overlay. Убедитесь, что используете актуальную версию Angular Material и правильно настроили Overlay для перемещения с прокруткой. Если проблема остается, пожалуйста, укажите больше деталей о вашей проблеме или предоставьте код, чтобы мы могли вам помочь.
Похожие вопросы