HSYL_WCSWEB/src-back/app/core/services/dialog.service.ts

import { Injectable, TemplateRef } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
import { ComponentType } from '@angular/cdk/portal';
import { Subscription } from 'rxjs';
import { DialogAlertComponent } from '@app/shared/components/dialog-alert/dialog-alert.component';
import { DialogConfirmComponent } from '@app/shared/components/dialog-confirm/dialog-confirm.component';
import { DialogPromptComponent } from '@app/shared/components/dialog-prompt/dialog-prompt.component';

@Injectable({
  providedIn: 'root'
})
export class DialogService {

  constructor(
    private _dialog: MatDialog
  ) { }

  public alert(content: string): Promise<any> {
    return new Promise(resolve => {
      const subscription: Subscription = this._dialog.open(DialogAlertComponent, {
        width: '600px',
        data: content
      }).afterClosed().subscribe(() => {
        subscription.unsubscribe();
        resolve(true);
      });
    });
  }

  //这段代码定义了一个名为 confirm 的方法，它接收一个字符串参数 content 并返回一个 Promise<any> 类型的对象。
  //这个方法的主要作用是显示一个确认对话框（通过 this._dialog.open 方法），并根据用户的选择（确认或取消）来解决或拒绝这个 Promise。
  public confirm(content: string): Promise<any> {
    return new Promise((resolve, reject) => {
      const subscription: Subscription = this._dialog.open(DialogConfirmComponent, {
        width: '600px',
        data: content
      }).afterClosed().subscribe(result => {
        //通过subscription.unsubscribe() 来取消订阅。然而，在这个特定的例子中，这一步其实是多余的，
        //因为 .afterClosed() 返回的 Observable 会在第一次发出值后自动完成（complete），这意味着订阅者不需要手动取消订阅。
        subscription.unsubscribe();
        //当对话框关闭时，根据返回的 result（通常是用户点击的按钮，如确认或取消），来决定是调用 resolve(true) 还是 reject()
        if (result) {
          resolve(true);
        }
        else {
          reject();
        }
      });
    }).catch(() => { });
  }

  //是一个用于显示一个带有输入或选择选项的对话框的函数，并返回一个 Promise 对象。
  //这个方法的设计允许用户输入文本、选择项、数字或输入密码，具体取决于提供的选项。
  public prompt(content: string, value?: string, options?: {
    type?: 'text' | 'select' | 'number' | 'password',
    range?: number[] | {},
    required?: boolean
  }): Promise<any> {
    return new Promise((resolve, reject) => {
      const subscription: Subscription = this._dialog.open(DialogPromptComponent, {
        width: '600px',
        data: {
          content: content,
          value: value,
          type: options?.type,
          range: options?.range,
          required: options?.required
        }
      }).afterClosed().subscribe(result => {
        subscription.unsubscribe();
        if (result && result.submit) {
          resolve(result.data || '');
        }
        else {
          reject();
        }
      });
    }).catch(() => { });
  }

 // 这段代码定义了一个名为 open 的泛型方法，该方法用于打开一个 Angular Material 对话框（MatDialog）。
 //此方法接受两个参数：component 和 config，并返回一个 Promise，该 Promise 在对话框关闭时解析其返回的结果。
 //open<T, D = any>：这是一个泛型方法，T 代表对话框组件的类型，D 是可选的，默认为 any，代表传递给对话框的数据类型。
 //component: ComponentType<T>：参数 component 是要打开的对话框组件的类型，ComponentType<T> 是 Angular 中的一个类型，表示一个组件类。
 //config?: MatDialogConfig<D>：参数 config 是一个可选参数，类型为 MatDialogConfig<D>，用于配置对话框的各种属性，如宽度、高度、是否自动聚焦等。
 //Promise<any>：方法返回一个 Promise，该 Promise 在对话框关闭时解析，解析值为对话框关闭时返回的结果。
  public open<T, D = any>(component: ComponentType<T>, config?: MatDialogConfig<D>): Promise<any> {
    if (config) {
      if (config.width === undefined) {
        config.width = '600px';  // 默认宽度
      }
      if (config.restoreFocus !== true) {
        config.restoreFocus = false; //当对话框关闭时，是否应该将焦点恢复到之前活动的元素上。设置为 false 表示不自动恢复焦点
      }
    }
    else {
      config = {
        width: '600px',
        restoreFocus: false
      }
    }
    //处理对话框关闭
    //使用 MatDialogRef<T> 对象的 afterClosed() 方法，该方法返回一个 Observable，该 Observable 在对话框关闭时发出一个值（通常是用户点击的按钮或其他关闭对话框时产生的结果）。
    //使用 subscribe 方法订阅这个 Observable，当对话框关闭时，执行订阅的回调函数。
    //在回调函数中，首先使用 unsubscribe 方法取消订阅，以避免内存泄漏。然后，使用 resolve 函数解析 Promise，将对话框关闭时返回的结果作为解析值。
    return new Promise(resolve => {
      const subscription: Subscription = this._dialog.open(component, config)
        .afterClosed()
        .subscribe(result => {
          subscription.unsubscribe();
          resolve(result);
        });
    });
  }

  // zb
  //这段代码定义了一个名为 show 的泛型方法，该方法用于在 Angular 应用中打开一个基于 MatDialog 的对话框。
  //MatDialog 是 Angular Material 库提供的一个服务，用于显示模态对话框。
  //这个 show 方法接受两个参数：template 和 config，并返回一个 MatDialogRef 对象，该对象代表了打开的对话框。
  //template (TemplateRef<T>): 这是一个 Angular 的模板引用变量，指定了对话框中应显示的内容。T 是泛型参数，代表模板的上下文类型。
  //config (MatDialogConfig<D> = any): 这是一个可选的配置对象，用于自定义对话框的各个方面。D 是另一个泛型参数，代表传递给对话框组件的数据类型。如果未提供，则默认为 any 类型。

  public show<T, D = any, R = any>(template: TemplateRef<T>, config?: MatDialogConfig<D>): MatDialogRef<T, R> {
    if (config) {
      if (config.width === undefined) {
        config.width = '600px';
      }
      if (config.restoreFocus !== true) {
        config.restoreFocus = false; //当对话框关闭时，是否应该将焦点恢复到之前活动的元素上。设置为 false 表示不自动恢复焦点
      }
    }
    else {
      config = {
        width: '600px',
        restoreFocus: false
      }
    }
    return this._dialog.open(template, config);
  }

  public close(): void {
    this._dialog.closeAll();
  }
}