Angular CDK连接Overlay，如何不覆盖原点与overlay背景？

Question

我正在尝试创建一个覆盖图，它连接到材料表中的一行。我已经让它工作了，但问题是我不希望它连接的原始行被覆盖在覆盖背景中，但我确实希望页面的其余部分被它覆盖。我尝试在overlay内的元素中添加一些填充，并将其定位到顶部，但这显然没有达到目的。

下面是我的行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 overlay的工作方式是在结束</body>标记之前创建<div class="cdk-overlay-container">。Overlay容器具有以下css规则：

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

因此，为了使任何元素位于覆盖容器之上，您可以使用耦合CSS规则，例如：

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

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

现在，您需要将该类附加到所需的元素(当显示overlay时，最好的方法是这样做)：

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

其中panelOpen是反映覆盖状态的boolean变量。

我还试着让你的stackblitz示例工作，它看起来表格需要更多的摆弄，因为它不允许重新堆叠单行。可能值得尝试CDK表的alternative html变体。

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