👩🏼‍🌾 😉 👨🏿‍🍳 Wir wickeln ein Promal-Modal-Bestätigungsfenster ein 🍾 🏿 🤷🏼

Wenn der Benutzer einige kritische und / oder irreversible Aktionen ausführt, müssen Sie den Benutzer um Bestätigung bitten, bevor Sie eine Anforderung an den Server senden.

In der Regel wird das Modal "Sind Sie sicher, dass Sie dies und das und das tun möchten" angezeigt und es gibt zwei Schaltflächen darunter: Ja und Nein. Wenn der Benutzer auf "Ja" geklickt hat, senden wir eine Anfrage an den Server und schließen das Modal. Wenn nicht, schließen Sie einfach das Modal.

Dies ist eine Standardfunktionalität, die üblicherweise an mehreren Stellen in einem Projekt verwendet wird. Wenn Sie die Funktionalität des Projekts aufbauen, werden wahrscheinlich noch einige weitere Stellen hinzugefügt, an denen Modalitäten mit Bestätigung erforderlich sind. Um eine Vervielfältigung von Code zu vermeiden, muss ein solches Modal daher eindeutig in einer separaten Komponente entfernt werden. Um die Versuchung zu vermeiden, Krücken zu hämmern, sollte diese Komponente so vielseitig und einfach wie möglich zu bedienen sein.

Lassen Sie uns von den Texten zur Aktion übergehen. Um das Modal anzuzeigen, verwenden wir Bootstrap.

Eigentlich meine Version einer solchen Komponente:

yes-no-modal.component.html

<div bsModal #yesNoModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-{{type}}" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{title}}</h4>
        <button type="button" class="close" (click)="onNoClick()" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{body}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="onNoClick()">{{noBtnText}}</button>
        <button type="button" class="btn btn-{{type}}" (click)="onYesClick()">{{yesBtnText}}</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

yes-no-modal.component.ts

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {ModalDirective} from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-yes-no-modal',
  templateUrl: './yes-no-modal.component.html',
  styleUrls: ['./yes-no-modal.component.css']
})
export class YesNoModalComponent implements OnInit {

  @ViewChild('yesNoModal') public yesNoModal: ModalDirective;

  @Input() private type = 'info';
  @Input() private title = '';
  @Input() private body = '';
  @Input() private yesBtnText = '';
  @Input() private noBtnText = '';

  constructor() { }

  ngOnInit(): void {
  }

  public showAsync(data = null): Promise<any> {
    return new Promise<any>((resolve, reject) => {
      this.yesNoModal.show();
      this.onYesClick = () => {
        this.yesNoModal.hide();
        resolve(data);
      };
      this.onNoClick = () => {
        this.yesNoModal.hide();
        reject(data);
      };
    });
  }

  private onYesClick(): any {}
  private onNoClick(): any {}

}

Ich habe die Warnüberschrift, den Warnungstext, das Farbschema / die Wichtigkeitsstufe (Gefahr, Info, Warnung) in die Parameter eingefügt. Sie können auch die Beschriftung auf den Schaltflächen neu definieren.

Um das Modal anzuzeigen, rufen Sie showAsync auf, in das wir beliebige Daten übertragen können. Wir erhalten die gleichen Daten in Auflösung / Ablehnung.

Verbinden Sie als Nächstes das Modal in einer anderen Komponente:

account.component.html

<app-yes-no-modal
  #deleteModal
  body="     ?"
  title=""
  type="danger"
></app-yes-no-modal>
<button (click)="delete()"></button>

account.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {YesNoModalComponent} from '../_common/yes-no-modal/yes-no-modal.component';
import {DeleteUserEndpoint} from '../../api/delete-user.endpoint';
import {ErrorService} from '../../services/error/error.service';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.css'],
  providers: [DeleteUserEndpoint]
})
export class AccountComponent implements OnInit {


  @ViewChild('deleteModal') public deleteModal: YesNoModalComponent;

  constructor (private deleteUserEndpoint: DeleteUserEndpoint) {
  }

  delete(data) {
    this.deleteModal.showAsync(data).then(result => {
      this.deleteUserEndpoint.execute(result);
    });
  }

  ngOnInit(): void {
  }
}

Meiner Meinung nach sieht die Verwendung einer solchen Lösung so einfach und lesbar wie möglich aus.

Zum Vergleich müssen Sie bei Verwendung von EventEmitter in jeder Komponente zwei Methoden definieren - showDeleteModal (), die durch Klicken auf die Schaltfläche Löschen aufgerufen wird, und die Methode delete (), die vom modalen Ereignis aufgerufen wird. Wenn Sie mehrere solcher Modalitäten in einer Komponente für verschiedene Benutzeraktionen haben, leidet die Lesbarkeit des Codes bereits.

In den Kommentaren erwarte ich wie immer konstruktive und vernünftige Kritik.

Wir wickeln ein Promal-Modal-Bestätigungsfenster ein

More articles: