Angular Material中Mat-Tab内共享SnackBar定位问题求助

要让SnackBar相对于Mat-Tab所在的容器定位，核心是修改SnackBar默认的全局挂载行为，将其附加到目标容器内，并调整定位策略和样式。以下是具体实现步骤：

1. 标记目标容器并获取引用 #

在包含Mat-Tab的组件HTML中，给目标容器添加模板引用变量，方便后续获取元素引用：

<div class="govcy-mt-4" #snackbarHost>
    <h4 class="govcy-fst-normal govcy-fw-700">{{ "Barricades.SuspendCancelTitle" | translate }}</h4>
    <mat-tab-group dynamicHeight animationDuration="10ms" [selectedIndex]="selectedTabIndex">
        <mat-tab label="{{'Barricades.VehicleLicenseTitle' | translate}}">
            <ng-template matTabContent>
                <govcy-deactivate-vehicle></govcy-deactivate-vehicle>
            </ng-template>
        </mat-tab>
        <mat-tab label="{{'Barricades.DriverLicenseTitle' | translate }}">
            <ng-template matTabContent>
                <govcy-deactivate-driver></govcy-deactivate-driver>
            </ng-template>
        </mat-tab>
    </mat-tab-group>
</div>

在组件TS中，通过ViewChild获取该容器的ElementRef，并配置自定义定位策略：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CustomSnackBarComponent } from './path/to/custom-snack-bar.component';
import { Overlay, PositionStrategy } from '@angular/cdk/overlay';

@Component({
  selector: 'app-your-tab-component',
  templateUrl: './your-tab-component.component.html'
})
export class YourTabComponent {
  selectedTabIndex = 0;
  @ViewChild('snackbarHost', { static: false }) snackbarHost!: ElementRef;

  constructor(
    private _snackBar: MatSnackBar,
    private overlay: Overlay
  ) {}

  onSubmit(): void {
    // 创建绑定到目标容器的相对定位策略
    const positionStrategy: PositionStrategy = this.overlay.position()
      .flexibleConnectedTo(this.snackbarHost.nativeElement)
      .withPositions([{
        originX: 'end',
        originY: 'top',
        overlayX: 'end',
        overlayY: 'top',
        offsetY: 16, // 距离容器顶部的间距
        offsetX: 16  // 距离容器右侧的间距
      }]);

    this._snackBar.openFromComponent(CustomSnackBarComponent, {
      data: { message: 'Barricades.VehicleLicenseSuspensionMessage', isCancel: false },
      duration: 3000,
      // 将SnackBar附加到目标容器
      viewContainerRef: this.snackbarHost.nativeElement,
      panelClass: ['custom-snackbar-container'],
      // 应用自定义定位策略
      positionStrategy: positionStrategy
    });
  }
}

2. 调整容器与SnackBar的样式 #

在组件SCSS或全局样式文件中添加以下样式，确保目标容器作为定位基准，同时覆盖SnackBar的默认全局样式：

/* 目标容器设置相对定位，让SnackBar的绝对定位以它为基准 */
.govcy-mt-4 {
  position: relative;
}

/* 自定义SnackBar容器样式，覆盖默认全局定位 */
.custom-snackbar-container {
  position: absolute !important;
  margin: 0 !important; /* 移除默认的全局margin */
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}

/* 保持自定义SnackBar的内容布局 */
.custom-snackbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}

关键原理说明 #

• Angular Material SnackBar默认挂载到全局的Overlay容器（通常是<body>下），因此无法继承Mat-Tab容器的定位上下文。
• 通过viewContainerRef指定SnackBar的挂载目标，将其附加到Mat-Tab所在的容器内，使其成为该容器的子元素。
• 结合PositionStrategy或CSS绝对定位，让SnackBar相对于目标容器的边角进行定位。

内容的提问来源于stack exchange，提问作者Hassan Lasheen