MatDialog 未在 angular 中的自定义 OverlayContainer 内呈现 15

Question

在 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 像以前的 angular 版本一样在自定义容器内呈现。

预期行为：

<body>
 <app-problem>
   <div>....</div>
   <div class="cdk-overlay-container">
      <mat-dialog-container></mat-dialog-container>
   </div>
 </app-problem>
</body>

Answer 1

我还没有将任何应用程序迁移到 v15（并且可能不会很快），所以我无法为您提供完整的工作解决方案 - 但也许我至少能够将您推向正确的方向。

如果您查看MatDialogBase 的构造函数，您会注意到虽然OverlayContainer仍被注入，但它被记录为已弃用且不再使用。 这就是为什么您的MatDialog仍然在默认的cdk-overlay-container呈现。

MatDialog文档没有提及任何关于更改呈现对话框的容器的内容。 如果您更深入地研究源代码，您会发现它将在MatDialogContainer中呈现 - 但似乎这是不可配置的，因为它是在MatDialog中显式输入的，而不是在MatDialogConfig中公开的。 因此，除非我遗漏了什么（我很可能遗漏了什么），否则您不能再更换容器了。 我认为你最好的选择是在 github 的angular/components回购中创建一个问题 - 如果有办法，我相信你会通过一个例子得到他们的回应，特别是因为它看起来像是一个巨大的回归。

幸运的是，自 v14 以来，有一个MatDialog的替代品 - 即它构建的CdkDialog 。 在那里， DialogConfig公开了一个container属性，它允许您为将在其中呈现对话框的组件指定组件类型或工厂。 缺点是您会丢失材料样式并且必须应用您自己的样式。