角确认框：如何使其看起来像对话框？

Question

我正在尝试在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);
          });
      }
    });
  }

Answer 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";