在 Angular 15 中，如果一个组件提供了 OverlayContainer 并被覆盖以将其用作自定义容器元素，则单个覆盖元素不会在容器内呈现（），而是附加到文档主体（默认行为）。
@Injectable()
export class OverlayService extends OverlayContainer{
constructor(
@Inject(DOCUMENT) _document: any,
platform: Platform,
private problem: ElementRef<HTMLElement>
) {
super(_document, platform);
}
protected override _createContainer(): void {
const containerClass = "cdk-overlay-container";
const container = this._document.createElement("div");
container.classList.add(containerClass);
this.problem.nativeElement.appendChild(container);
this._containerElement = container;
}
}
@Component({
selector: 'app-problem',
templateUrl: './problem.component.html',
styleUrls: ['./problem.component.css'],
providers: [
DialogServiceService,
MatDialog,
{ provide: OverlayContainer, useClass: OverlayService },
],
})
当前行为：
<body>
<app-problem></app-problem>
</body>
<div class="cdk-overlay-container">
<mat-dialog-container></mat-dialog-container>
</div>
https://stackblitz.com/edit/angular-pfwikb?file=src%2Fapp%2Fproblem%2Fproblem.component.ts
我期待 MatDialog 像以前的角度版本一样在自定义容器内呈现。
预期行为：
<body>
<app-problem>
<div>....</div>
<div class="cdk-overlay-container">
<mat-dialog-container></mat-dialog-container>
</div>
</app-problem>
</body>
我还没有将任何应用程序迁移到 v15（并且可能不会很快），所以我无法为您提供完整的工作解决方案 - 但也许我至少能够将您推向正确的方向。
如果您看一下 MatDialogBase 的构造函数，您会注意到虽然
OverlayContainerMatDialogcdk-overlay-containerMatDialogMatDialogContainerMatDialogMatDialogConfigangular/components幸运的是，自 v14 以来，有一个
MatDialogCdkDialogcontainer经过 4 天的寻找解决方案后，这个技巧很有魅力
in your CSS file add this style :
.mat-mdc-dialog-container {
position: fixed !important;
top:0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
display: flex !important;
width: 50% !important;
height: 50% !important;
margin: auto !important;
}