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

问题描述

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

确认-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;
  }
}

列表内容.component.html

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

列表内容.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);
          });
      }
    });
  }

标签： angularangular-materialmodal-dialog

我所要做的就是将此行添加到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/

angular - 角度确认框：如何使它看起来像一个对话框？

问题描述

解决方案

推荐阅读