使用 mat dialog 和 bootstrap sticky top 类

Question

我面临的问题是，每次单击删除条目时，它都会出现一个垫子对话框，并且背景中的其他所有内容都变灰，但是，我面临的行为是，一旦我尝试删除对话框出现一个条目，但粘性顶部（在本例中为标题）没有变灰。日志组件位于详细信息组件中，因此当对话框出现时，除了粘性之外的所有内容都是灰色的。代码如下所示。有谁知道如何处理这种情况或为什么会出现这种行为？

使用：Angular Material 版本12.2.13。引导版本5.1。

log.component.html

<div class="row mx-auto">
      <table mat-table [dataSource]="LogSource" class="mat-elevation-z8 orange">
        
        //...other tables are go here

        <ng-container matColumnDef="Delete">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element" (click)="deleteEntry(12)">
            <button class="btn btn-danger">
              <i class="bi bi-x"></i>
            </button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
        <tr
          mat-row
          *matRowDef="let row; columns: displayColumns"
        ></tr>
      </table>

log.component.ts

import { Component, OnInit} from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { LogMessageComponent } from 'src/app/dialogs/log-message/log-message.component';

@Component({
  selector: 'app-log',
  templateUrl: './log.component.html',
  styleUrls: ['./log.component.scss'],
})
export class LogComponent implements OnInit {

  displayContactLogColumns = [
    'CreatedDateTime',
    'CreatedByUser',
    'ContactType',
    'Study',
    'Outcome',
    'OutcomeDetails',
    'Notes',
    'Delete',
  ];
  LogSource: any[];
  errorMessage: string;

  constructor(
    public dialog: MatDialog
  ) {
    this.LogSource = [];
    this.errorMessage = ''
  }

  deleteLog(Id: number) {

    if (deleteLog !== -1) {
      //I'm forcing a delete for now
    } else {
      const errorMessage = `Could not find log with id of ${Id}`;
      this.dialog.open(LogMessageComponent);

      throw new Error(errorMessage);
    }
  }
}

sticky.component.ts 这就是粘性所在。

<section id="details" class="container">
  <!-- SUMMARY -->
  <header id="demo" class="mt-3 sticky-top bg-body">
    <div class="row">
      //Some code goes here
    </div>
  </header>
</section>

Answer 1

我以前无法测试它，但如果你制作一个 css 类 让整个屏幕“变灰”，也许你可以解决你的问题，例如：

.hideFullScreen {
  background:grey;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}

然后您为您的对话框制作一个材质对话框配置，并将“hideFullScreen”类 css 添加到其中：

if (deleteContact !== -1) {
      //I'm forcing a delete for now
    } else {
      const errorMessage = `Could not find log with id of ${Id}`;
      const dialogConfig = new MatDialogConfig();
      dialogConfig.panelClass = 'hideFullScreen';      
      this.dialog.open( ContactLogMessageComponent, dialogConfig );

      throw new Error(errorMessage);
    }
  }