如何从自定义确认装饰器访问自定义服务和对话框答案

【问题标题】：How to access Custom service and dialog from custom confirm decorator如何从自定义确认装饰器访问自定义服务和对话框
【发布时间】：2021-09-29 00:07:51
【问题描述】：

如何在角度依赖注入中访问该单例实例？

我想用这种方式为确认对话框编写自定义装饰器。
装饰器实现：

import {NgplDialogConfirmModel, NgplDialogService} from '../dialog';
import {take} from 'rxjs/operators';

export function Confirmable(options?: NgplDialogConfirmModel, confirm = 'confirmService') {

  // our factory function will return our actual decorator function, but now we have
  // an actual options object to configure our alert box :)
  return (target: Object, propertyKey: string, descriptor: PropertyDescriptor) => {
    // the usual, caching the original implementation
    const originalMethod = descriptor.value;
    // default values for our config, we’ll overwrite this with our options parameter

    console.log('target', target);
    console.log('propertyKey', propertyKey);
    console.log('descriptor.value', descriptor.value);
    console.log('target[confirm]', target[confirm]);
    const service: NgplDialogService = target &&  target[confirm];
    if (!service) {
     return descriptor;
    }
    descriptor.value = function(...args: any[]) {
      const dialogRef = service.confirm(options);
      return dialogRef
        .pipe(
          take(1)
        )
        .subscribe((confirmed: boolean) => {
          if (!!confirmed) {
            originalMethod.apply(this, ...args);
          }
        });
    };
    return descriptor;

  };

}

在这里使用

  @Confirmable()
  confirmDelete(action): void {
    console.log('action', action);
  }

我有自己的服务与 matDialog 集成并确认我在任何地方使用的操作。


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

  constructor(private dialog: MatDialog) {
  }

  public confirm(data: any= {}): Observable<boolean> {
    data.title = data.title || 'Confirm';
    data.message = data.message || 'Are you sure?';
    data.showCancel = data.showCancel || true;
    data.showIcon = data.showIcon || true;

    let dialogRef: MatDialogRef<ConfirmComponent>;
    console.log('this.dialog', this.dialog);
    dialogRef = this.dialog.open(ConfirmComponent, {
      width: '480px',
      disableClose: true,
      data,
      backdropClass: 'confirm-backdrop-class',
      panelClass: 'confirm-panel-class'
    });
    return dialogRef.afterClosed();
  }
}

我尝试了一些方法，例如 Injertor.create 和 ReflectiveInjector(deprecated)，但我无法访问我的服务实例。

我试图访问从装饰器注入到组件内部的confirmService，但装饰器在组件依赖注入完成之前执行。

【问题讨论】：

你能在stackblitz.com上制作一个可运行的样本
@AlirezaAhmadi 示例在 stackblizt 上运行：stackblitz.com/edit/angular-ivy-2bpgfc，请检查 stackblizt 控制台，装饰器函数在角度组件初始化之前执行，并且无权访问 ConfirmService 注入并需要显示对话框确认跨度>

标签： angular decorator mat-dialog

【解决方案1】：

在互联网上阅读了几篇相同的文章后，我再次阅读了这篇文章，https://medium.com/capital-one-tech/custom-typescript-decorators-using-rxjs-and-angular-services-6ddd1079f683，我对这种方法有了更好的理解，并在我的 stackbliz 代码中尝试了它，它的工作原理。 https://stackblitz.com/edit/angular-ivy-2bpgfc?file=src%2Fapp%2Fapp.component.ts

【讨论】：