如何在对话框角度材料内部对齐按钮？

我想要下面对话框右上角的对齐按钮是我的 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>

<a href="https://stackblitz.com/edit/angular-ksmixt?file=app/dialog-overview-example-dialog.html">demo</a>

您可以使用alignHTML 属性：

<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>

Demo https://stackblitz.com/edit/mat-dialog-aligned-actions

注：之所以设置align="end"属性适用于对话框的操作容器是因为align属性用于将 Flexbox 属性添加到对话框组件的主题 SCSS 文件中的对话框操作：

（摘录于dialog.scss)

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

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

这是源代码 https://github.com/angular/components/blob/07f6a4892cbe44fbb66ff2ded5cdef92087bd5aa/src/material/dialog/dialog.scss#L56-L62.