Md-диалог закрывается после уведомления

У меня есть диалоговое окно, в котором пользователь может вводить данные, и после нажатия «создать» мое диалоговое окно закрывается, и пользователь получает уведомление. Я хочу закрыть свое диалоговое окно после того, как пользователь получит уведомление, и если пользователь вводит неверные данные, пользователь должен получить уведомление для этого, и диалоговое окно не должно приближаться.

В настоящее время все работает правильно, но я хочу, чтобы мое диалоговое окно исчезло после уведомления (услуга toster).

Может ли кто-нибудь помочь мне с этой штукой, чтобы мой диалог оставался до тех пор, пока я не получаю уведомление о успехе, а также за ошибку?

exhibition.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>

как это сделать?

html,angular,typescript,mddialog,angular2-toaster,

1

Ответов: 1


1 принят

Как заявил windmaomao, вам нужно вручную вызвать метод close (). Компонент Material Dialog proivide Наблюдается только после afterClose () или beforeClose (), и эти методы прослушивают данные, переданные методом close (). Метод close () закрывает диалог, что не является нашим ожиданием. Вам необходимо реализовать свою собственную систему связи между компоновкой и построением диалога с помощью вида Observable или EventEmitter. Я подготовил упрощенное решение вашей проблемы. Трюк заключается в том, что вы можете получить ссылку на любое поле или метод вашего компонента диалога с помощью «componentInstance» getter.

Компонент диалога

  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;
    }
    }
  )
}
HTML, угловые, машинопись, mddialog, angular2-тостер,
Похожие вопросы