feat: add a common dialog

Author: MikiraSora

src/app/dialog.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+export interface DialogCustomModel {
+  title: string;
+  message: string;
+  yesContent: string;
+  noContent: string;
+  yesClass: string;
+  noClass: string;
+}
+
+@Component({
+  selector: 'app-dialog',
+  template: `
+    <div class="modal-header">
+      <h4 class="modal-title">{{ customModel.title }}</h4>
+    </div>
+    <div class="modal-body">
+      <ng-container>
+        <p>{{ customModel.message }}</p>
+      </ng-container>
+
+      <ng-content></ng-content>
+    </div>
+    <div class="modal-footer">
+      <button class="btn {{customModel.yesClass}}" (click)="activeModal.close(true)">{{customModel.yesContent}}</button>
+      <button class="btn {{customModel.noClass}}" (click)="activeModal.close(false)">{{customModel.noContent}}</button>
+    </div>
+  `
+})
+export class DialogComponent {
+  customModel: DialogCustomModel = null;
+  constructor(public activeModal: NgbActiveModal) { }
+}

src/app/dialog.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DialogComponent, DialogCustomModel } from './dialog.component';
+
+@Injectable({ providedIn: 'root' })
+export class DialogService {
+    constructor(private modalService: NgbModal) { }
+
+    showCustom(customModel: DialogCustomModel): Promise<boolean> {
+        if (!customModel.yesContent)
+            customModel.yesContent = "确定";
+        if (!customModel.noContent)
+            customModel.noContent = "取消";
+        if (!customModel.yesClass)
+            customModel.yesClass = "btn-primary";
+        if (!customModel.noClass)
+            customModel.noClass = "btn-secondary";
+
+        const modalRef = this.modalService.open(DialogComponent, { centered: true });
+        modalRef.componentInstance.customModel = customModel;
+
+        return modalRef.result.catch(() => false);
+    }
+
+    show(title: string, message: string): Promise<boolean> {
+        return this.showCustom({ title, message, yesClass: null, yesContent: null, noClass: null, noContent: null });
+    }
+}