使用mat对话框和bootstrap粘性顶级

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>

日志组件.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);
}
}
}

粘性组件.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);
}
}