通知后關閉 Md 對話框

Question

我有用戶可以輸入數據的對話框，單擊“創建”后，我的對話框關閉並且用戶收到通知。 我想在用戶收到通知后關閉我的對話框，如果用戶輸入了錯誤的數據，用戶也應該收到通知並且對話框不應該關閉。

目前，一切正常，但我希望我的對話框在通知后消失（托斯特服務）。

任何人都可以幫我解決這個問題，這樣我的對話框就會一直存在，直到我收到成功和錯誤的通知？

展示.component.ts（主要組件）

  createExhibit(event: any) {
    let context = this;
    this.createDialogRef = this.dialog.open(CreateExhibitDialogComponent, { width: '45em', data: {} });
    this.createDialogRef.afterClosed().subscribe(
      (newExhibit: Exhibit) => {
        if (newExhibit.latitude) { newExhibit.latitude = newExhibit.latitude.toString().replace(/,/g, '.'); }
        if (newExhibit.longitude) { newExhibit.longitude = newExhibit.longitude.toString().replace(/,/g, '.'); }
        if (newExhibit) {
          this.exhibitService.createExhibit(newExhibit)
            .then(
              () => {
                this.toasterService.pop('success', this.translate('exhibit saved'));
                setTimeout(function () {
                  context.reloadList();
                }, 1000);
              }
            ).catch(
              error => this.toasterService.pop('error', this.translate('Error while saving'), error)
            );
        }
        this.createDialogRef = null;
      }
    );
  }

createExhibit.component.ts

<h1 md-dialog-title>{{ 'create exhibit' | translate }}</h1>

<md-dialog-content>
  <form id="new-exhibit-form">
    <md-input-container>
      <input mdInput placeholder="{{ 'name' | translate }}" [(ngModel)]="exhibit.name" name="name" required>
    </md-input-container>
    <md-input-container>
       <textarea
         mdInput
         mdTextareaAutosize
         #autosize="mdTextareaAutosize"
         placeholder="{{ 'description' | translate }}"
         [(ngModel)]="exhibit.description"
         name="desc"></textarea>
    </md-input-container>

    <div layout="row" layout-align="start center" flex>
      <md-icon _ngcontent-c7="" class="mat-icon material-icons centered" role="img" aria-hidden="true">search</md-icon>
      <md-input-container>
        <input mdInput  placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
      </md-input-container>
      <md-input-container>
        <input (blur)="updateMap()" mdInput type="number" min="-90" max="90" step="0.000001"
               placeholder="{{ 'latitude' | translate }}" [(ngModel)]="exhibit.latitude" name="lat">
      </md-input-container>
      <md-input-container>
        <input (blur)="updateMap()" mdInput type="number" min="-180" max="180" step="0.000001"
               placeholder="{{ 'longitude' | translate }}" [(ngModel)]="exhibit.longitude" name="long">
      </md-input-container>
      <md-select  class="align-right" placeholder="{{ 'status' | translate }}" [(ngModel)]="exhibit.status" name="status">
        <md-option *ngFor="let statusOption of statusOptions" [value]="statusOption">{{ statusOption | translate }}</md-option>
      </md-select>
    </div>
    <agm-map (mapClick)="selectLocation($event)" [zoom]=15 [latitude]="lat" [longitude]="lng">
      <agm-marker [iconUrl]="'../../../images/map-marker.png'" *ngIf="exhibit.longitude && exhibit.latitude" [latitude]="exhibit.latitude" [longitude]="exhibit.longitude"></agm-marker>
    </agm-map>
  </form>
</md-dialog-content>

<md-dialog-actions align="end">
  <button md-dialog-close md-raised-button>
    {{ 'cancel' | translate }}
    <md-icon>cancel</md-icon>
  </button>
  <button md-raised-button [disabled]="!exhibit.isValid()" color="primary" (click)="dialogRef.close(exhibit)">
    {{ 'create' | translate }}
    <md-icon>add_circle</md-icon>
  </button>
</md-dialog-actions>

這該怎么做？

Answer 1

正如windmaomao所說，您需要手動調用對話框close()方法。 Material Dialog 組件僅從 afterClose() 或 beforeClose() 提供 Observable 並且這些方法偵聽通過 close() 方法傳遞的數據。 close() 方法關閉對話框當然不是我們所期望的。 您需要使用 Observable 或 EventEmitter 類型在組件和對話框構建之間實現自己的通信系統。 我已經為您的問題准備了簡化的解決方案。 訣竅是您可以使用“componentInstance”獲取器獲取對對話框組件的任何字段或方法的引用。

對話框組件

  import {Component, EventEmitter, OnInit} from '@angular/core';
  import {MatDialogRef} from "@angular/material";

  @Component({
    selector: 'app-simple-dialog',
    template: `<h2 mat-dialog-title>Entering some data</h2>
    <mat-dialog-content>Is data OK?</mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button (click)="actionNo()">No</button>
      <button mat-button (click)="actionYes()">Yes</button>
    </mat-dialog-actions>`,
    styleUrls: ['./simple-dialog.component.css']
  })
  export class SimpleDialogComponent implements OnInit {

    private _action: EventEmitter<boolean> = new EventEmitter<boolean>();
    answer = this._action.asObservable();

    constructor(public dialogRef: MatDialogRef<SimpleDialogComponent>) { }

    actionYes() {
      this._action.next(true);
    }

    actionNo() {
      this._action.next(false);
    }

    closeDialog() {
      this.dialogRef.close();
    }

    ngOnInit() {
    }

  }

以及要包含在主要組件中的 HTML 模板摘錄代碼：

    <button (click)="openDialog()">Open Dialog</button>

openDialog() 方法的代碼：

openDialog() {
  let dialogRef = this.dialog.open(SimpleDialogComponent);
  dialogRef.componentInstance.answer.subscribe( answer => {
    console.log('Answer from Dialog: ' + answer);
    switch(answer) {
      case true:
        console.log('Data is OK. Closing dialog');
        //do some complicated stuff
        dialogRef.componentInstance.closeDialog();
        //can be simple: dialogRef.close(); 
        break;
      case false:
        console.log('Data is not OK. Not closing dialog. Show some toaster');
        break;
    }
    }
  )
}