如何在Dialog角度材料内对齐按钮？

Question

我想对齐按钮右下角的对话框是我的HTML

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>

  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

演示

Answer 1

更新的答案(截至2018年12月20日)

我发现该align属性用于将flexbox CSS属性添加到对话框组件的主题SCSS文件中的对话框操作:

(摘录dialog.scss)

.mat-dialog-actions {
  // ...
  &[align='end'] {
    justify-content: flex-end;
  }

  &[align='center'] {
    justify-content: center;
  }
}

这是源代码的 行:SCSS的行

原始答案

您可以使用[align]HTML属性:

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

演示

Answer 2

由于HTML5不支持该align属性，因此应改用以下CSS：

.mat-dialog-actions {
    justify-content: flex-end;
}

这是当您放置时align="end"，Angular Material在内部完成的操作，您可以检查元素以进行检查。