WedX - журнал о программировании и компьютерных науках

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

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

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

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

выставочный.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>

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

typescript angular html mddialog angular2-toaster
31.05.2018

  • Обычно createDialogRef поставляется с методом close() или closeAll(). Вам нужно вручную вызвать их в вашем случае. 31.05.2018
  • @James.. Я пытаюсь это сделать, но не понимаю, как мне закрыть диалоговое окно после получения уведомления. и если я ввожу неправильные данные, мой диалог должен остаться, и я должен получить уведомление о неправильных вводах... 01.06.2018

Ответы:


1

Как указано в windmaomao, вам необходимо вручную вызвать метод dialog close(). Компонент Material Dialog предоставляет Observable только из afterClose() или beforeClose(), и эти методы прослушивают данные, переданные через метод 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;
    }
    }
  )
}
29.06.2018
Новые материалы
Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Для любых предложений по сайту: wedx@cp9.ru