Question

我正在尝试创建一个覆盖层，该覆盖层连接到材质表中的一行。我已经做到了，但是问题是我不希望它所连接的原始行被覆盖背景所覆盖，但是我确实希望它的其余页面被覆盖。我尝试将一些填充添加到叠加层中的元素上并定位到顶部，但这显然没有得到。

这是我的html行：

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
  cdkOverlayOrigin
  #row
  (click)="setOverlay(row)">

和一些用于设置覆盖图的测试代码：

  @ViewChildren(CdkOverlayOrigin)
  orgins: QueryList<CdkOverlayOrigin>;

  @ViewChildren('row')
  rows: QueryList<ElementRef>;

  constructor(private _overlay: Overlay) {}

  setOverlay(row) {
    let idx = this.rows.toArray().findIndex(e => e === row);
    let origin = this.orgins.toArray()[idx];
    const positionStrategy = this._overlay
        .position()
        .connectedTo(origin.elementRef, 
          {originX: 'start', originY: 'top'}, 
          {overlayX: 'start', overlayY: 'top'});

    const overlayRef = this._overlay.create({
        width: origin.elementRef.nativeElement.clientWidth,
        hasBackdrop: true,
        positionStrategy,
        scrollStrategy: this._overlay.scrollStrategies.reposition()
    });

    overlayRef.backdropClick().subscribe(() => overlayRef.detach());

    const overlayPortal = new ComponentPortal(TestOverlayComponent);

    overlayRef.attach(overlayPortal);
  }

这是我一直在玩的闪电战：https://stackblitz.com/edit/angular-8sqnol?file=app%2Ftable-expandable-rows-example.ts

注意：可扩展行不是我在这里追求的。我需要这样的覆盖行为，即覆盖必须覆盖整个表格并且不将其按下。

我们将不胜感激。我不认为当前的方法可以做到这一点。想知道是否需要以某种方式将叠加层背景限制为仅下降到叠加层的顶部，然后将其余的背景创建为实际叠加层的一部分。

Answer 1

CDK叠加层的工作方式是在结束<div class="cdk-overlay-container">标签之前创建</body>。重叠式容器具有以下CSS规则：

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
}

因此，为了使任何元素都位于叠加层容器上方，您可以使用CSS规则，例如：

.show-above-overlay {
  position: relative; // *
  z-index: 1001; // This should be enough
}

*您可以阅读更多有关为什么需要在此article中指定relative的信息。

现在，您需要将该类附加到所需的元素（显示叠加层时的最佳方法）：

<div
  cdkOverlayOrigin
  [ngClass]="{ 'show-above-overlay': panelOpen }"
  (click)="setOverlay()">
</div>

其中panelOpen是反映重叠状态的boolean变量。

我也尝试过使您的stackblitz示例工作，并且看起来表需要更多摆弄，只是因为它不允许重新堆积单行。可能值得尝试alternative html CDK表的变体。

Answer 2

我已经在您的代码中添加了它。

  if(this.isAllSelected()){
          this.selection.clear();
          // this.isButtonEnable = true;
      }else{
          this.dataSource.data.forEach(row => this.selection.select(row));
          // this.isButtonEnable = false;
  }

有关更多信息，请点击此处stackblitz

Angular CDK Connected Overlay，如何不使用叠加背景覆盖原点？

2 个答案: