4 回答

• 0

  我跑过this link . 虽然我还没有尝试过，但看起来解决方案是像往常一样创建一个Component，以及一个使用该组件的服务：

  @Injectable()
  export class DialogService {  
    constructor(private modalService: NgbModal) {}
  
    public confirm() {
      const modalRef = this.modalService.open(DialogComponent);
      modalRef.componentInstance.name = "Discard Changes?";
      modalRef.componentInstance.message = "Are you sure you want to discard your changes?";
      modalRef.componentInstance.changeRef.markForCheck();
      return modalRef.result;
    }
  }
  

  诀窍是确保从主@NgModule引用DialogComponent：

  NgModule（{imports：[...]，声明：[DialogComponennt]，bootstrap：[AppComponent]，providers：[DialogService]，entryComponents：[DialogComponent]}）

  回复于 2024-04-29T08:04:33+08:00
• 0

  如果您对sweetalert2具有依赖性，则对话服务变得非常简单：

  import { Injectable } from '@angular/core';
  import { default as swal } from 'sweetalert2';
  
  @Injectable()
  export class DialogService {
      confirm(title: string, message: string) {
          return swal({
              title: title,
              text: message,
              type: 'warning',
              showCancelButton: true
          });
      };
  }
  

  回复于 2024-04-29T08:04:33+08:00
• 4

  Angular Material有一个对话框，以“角度”类型的方式工作，并支持多个打开的对话框（不确定为什么，但确实如此） .

  https://material.angular.io/components/dialog/overview

  回复于 2024-04-29T08:04:33+08:00
• 1

  import { Observable } from 'rxjs/Rx';
  import { DialogsFormComponent } from  './dialogs-form.component';
  import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
  import { Injectable } from '@angular/core';
  import { FormBuilder, FormGroup } from '@angular/forms';
  
  @Injectable() 
  exprt class DialogsFormService {
  constructor(private dialog: MatDialog, private fb: FormBuilder) { }
  public config(title: string, fields: any, formGroup: any): Observable<boolean> {
  let dialogRef: MatDialogRef<DialogsFormComponent>;
  dialogRef = this.dialog.open(DialogsFormComponent, { width: '600px
  '});
  if (formGroup instanceof FormGroup) {
  dialogRef.componentInstance.modalForm = formGroup;
  } else {
  dialogRef.componentInstance.modalForm = this.fb.group(formGroup);
  }
  dialogRef.componentInstance.title = title;
  dialogRef.componentInstance.fields = fields;
  return dialogRef.afterClosed();
  }
  }
  

  component.ts

  import { Validators } from '@angular/forms';
  
  export class YourComponent {
  constructor (private dialogsFormService: DialogFormService) {}
  openDialog() {
  const title =  'Your Title';
  const type = 'your type you can control on dialog html';
  const fields = dialogFieldOptions;
  const formGroup = {
  prority:['', Validators.required ],
  type: ['', Validators.required ],
  message: ['', Validators.required]
  };
  this.dialogsFormService.confirm(title, fields, formGroup)
  .subscribe((res) => {
  if (response != undefined) {
  // do some things
  }
  });
  }
  }
  const dialogFieldOptions = [
  {
  'label': 'you lable',
  'type': 'radio',
  'name': 'your name',
  'option': ['option1', 'option2'],
  'required': true;
  }
  ];
  

  dialog-form.component.ts

  import { component, Inject } from '@angular/core';
  import { MatDialogRef } from '@angular/material';
  import { FormGroup } from '@angular/forms';
  @Component({ templateUrl:'./dialogs-form.component.html'})
  export class DialogsFormComponent {
  public title: string;
  public fields: any;
  public modalForm: any;
  private markFormAsTouched (formGroup: FormGroup) {
  (<any>Object).values(formGroup.constrols).forEach(control => {
  control.markAsTouched();
  if (control.controls) {
  this.markFormAsTouched(control);
  }
  });
  }
  constructor(public dialogRef: MatDialogRef<DialogsFormComponent>) { }
  onSubmit(mForm, dialog) {
  if (mForm.valid) {
  dialog.close(mForm.value);
  } else {
  this.markFormAsTouched(mForm);
  }
  }
  }
  

  dialog-form.component.html

  <form (ngSubmit) = "onSubmit(modelForm, dialogRef)" [formGroup]= "modalForm">
  <mat-dialog-content>
  <selection *ngIf = "field.type ==== 'radio'">
  <label> field.label</label>
  <mat-radio-group formControlName="field.name" required = "field.required">
  <mat-radio-button *ngFor="let option of field.options" [value]= "option">
  {{option}}</mat-radio-button>
  </mat-radio-group>
  </selection>
  </mat-dialog-content>
  <mat-dialog-actions>
  <button type="button" mat-raised-button (click)="dialogRef.close()"> Cancle</button>
  <button type="submit" mat-raised-button> Submit</button>
  </mat-dialog-actions>
  </form>
  

  回复于 2024-04-29T08:04:33+08:00