角度确认框：如何使它*看起来*像一个对话框？答案

【问题标题】：Angular confirmation box: how do I make it *look* like a dialog box?角度确认框：如何使它*看起来*像一个对话框？
【发布时间】：2019-12-11 20:32:15
【问题描述】：

我正在尝试在 Angular 8.3 中编写一个简单的“是/否”确认框。

在 C#、Java、JS 等中，这将是一个单行：var result = MessageBox.Show("Click Me", "My Dialog", MessageBoxButtons.YesNo);

在 Angular 中，似乎首选的方法是使用 Material Dialog。它有点工作 - 但它看起来或行为不像我期望的那样。具体来说：

我想要一个弹出窗口
有边框
在屏幕上居中
我还希望“是”成为默认选项，并清楚地突出显示。

问：我该怎么做？

注意：我喜欢这个链接……但它似乎已经过时了：https://stackoverflow.com/a/39106139/3135317

app.module.ts

import { MatDialogModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...    
import { ConfirmationDlgComponent } from './common/confirmation-dlg.component';

@NgModule({
  declarations: [
    ...
    ConfirmationDlgComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ...
    MatDialogModule
  ],
  providers: [],
  entryComponents: [ ConfirmationDlgComponent ],
  bootstrap: [AppComponent]
})
export class AppModule { }

confirmation-dlg.component.ts

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material';

@Component({
  template: `
  <h3 mat-dialog-title>{{dlgTitle}}</h3>
  <mat-dialog-content>{{dlgMessage}}</mat-dialog-content>
  <mat-dialog-actions>
    <button mat-button mat-dialog-close>No</button>
    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Yes</button>
  </mat-dialog-actions>
  `
})
export class ConfirmationDlgComponent {
  dlgTitle: string;
  dlgMessage: string;

  constructor(
    public dialogRef: MatDialogRef<ConfirmationDlgComponent>,
    @Inject(MAT_DIALOG_DATA) public extraData) {
    this.dlgTitle = extraData.dlgTitle;
    this.dlgMessage = extraData.dlgMessage;
  }
}

list-contents.component.html

<button class="btn btn-primary" (click)="deleteContact(contact)"> Delete Contact </button>

list-contents.component.ts

deleteContact(contact: Contact) {
    const dialogRef = this.dialog.open(ConfirmationDlgComponent, {
      hasBackdrop: true,
      height: '250px',
      position: {top: '', bottom: '', left: '', right: ''},
      data: {
        dlgTitle: 'Delete (' + contact.name + ')',
        dlgMessage: 'Really delete this contact?'
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        console.log('Yes clicked');
        this.contactsService.deleteContact(contact).subscribe(
          data => {
            console.log('loadContacts', data);
            this.loadContacts();
          },
          err => {
            console.error('deleteContact', err);
          });
      }
    });
  }

【问题讨论】：

Material Dialog 有什么问题？我知道你为对话框指定了你想要的属性，但我不确定你想要什么与 Material Dialog 提供的有什么不同？
问：怎么了？ A：我想要一个弹出窗口。带边框。以屏幕为中心。我还希望“是”成为默认选项，并清楚地突出显示。所有这些，我想，应该是可能的。

标签： angular angular-material modal-dialog

【解决方案1】：

我所要做的就是将此行添加到styles.css：

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

从此链接：

https://appdividend.com/2019/02/11/angular-modal-tutorial-with-example-angular-material-dialog/

【讨论】：

哦，我明白了。对于那个很抱歉。我刚刚在您的原始屏幕截图中意识到对话框内容在页面上，而不是设置为对话框。