带有 X 右上角的角度 8 材质对话框关闭按钮

Question

我试图让我的材质对话框在右上角有一个 X 按钮，但我在定位方面遇到了问题。

组件.ts

 this.d.open(loginComponent, {
  width: '300px',
  height: '',
  panelClass: 'dialogC',
});

组件.html

 <mat-dialog-content>
    <button mat-button class="close-icon" [mat-dialog-close]="true">
        <mat-icon>close</mat-icon>
    </button>
    <h2 mat-dialog-title>Login</h2>

样式.scss

 .dialogC {
  position: relative !important;
}

.close-icon {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

X 只是对齐到左侧而不是右上角。建议？

更新，这是我在添加 flex 后遇到的问题：

原文由 Jonathan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<button class="close" mat-button (click)="onNoClick()">X</button>
<h1 mat-dialog-title>Login</h1>
<div mat-dialog-content>
...
...
</div>

CSS：（ 请在全局（ styles.css ）中提供或提供 ViewEncapsulation.NONE 否则这些样式不会影响。）

 .cdk-overlay-pane.my-dialog {
  position: relative!important;
}
.close.mat-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  line-height: 14px;
  min-width: auto;
}

请注意，在 CSS 我们现在凭空有了一个新类 .my-dialog

所以，请在 panelClass 中提及 dialogRef 如下所示，

 this.dialog.open(DialogComponent, {
      width: '250px',
      panelClass: 'my-dialog',
..
..

这会产生以下结果，

原文由 Fasid Mpm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

现在简单的方法是：

 <div mat-dialog-title class="dialog-title">
  <h2>Title</h2>
  <button mat-icon-button aria-label="close dialog" mat-dialog-close>
    <mat-icon>close</mat-icon>
  </button>
</div>

对话框标题 css 是

.dialog-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

这适用于 Angular 8.0.0

原文由 Degs 发布，翻译遵循 CC BY-SA 4.0 许可协议