javascript - Angular mat-dialog-title 和 mat-dialog-actions 不粘连

Question

我不确定我在这里做错了什么，但我的对话框似乎没有使用我的部分。这就是我布置对话框的方式：

Stackblitz 示例

<ng-container ngProjectAs="[mat-dialog-title]">
  <app-dialog-header header="Command Line Arguments"></app-dialog-header>
</ng-container>

<div mat-dialog-content fxLayout="column" fxLayoutGap="5px">
  <textarea rows="15" class="primary-background"></textarea>
</div>

<div mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
  <button mat-button>Cancel</button>
  <button mat-button color="accent">Save</button>
</div>

这就是我在对话框顶部时的样子。

这是我滚动到对话框底部时的样子。

根据文档，使用时[mat-dialog-title]标题应贴在顶部，使用[mat-dialog-actions]操作时应贴在对话框底部。如屏幕截图所示，这并没有发生。

这就是我打开模式的方式：

  showCmdArgsDialog() {
    this.dialog.open(CmdArgsDialogComponent, {
      width: '75vw',
      height: '80vh',
      panelClass: 'cmd-args-dialog'
    })
  }

Answer 1

由于对话框选项，它不粘：

{
  width: '75vw',
  height: '400px',
}

但它仍然存在一些问题FlexLayoutModule和app-dialog-header组件。它适用于 native mat-dialog-title。请参阅StackBlitz。

Answer 2

我怀疑问题可能出在如何编译角度组件

如果您在浏览器元素窗口（下面的屏幕截图）中注意到，您可以看到 mat-dialog-title 显示在 app-dialog-header 元素下，但是，它应该是相反的。正如其他答案提到的那样，使用本机 mat-dialog-title 可以正常工作。