将附加参数传递给 angular 组件内的方法装饰器

Question

假设我们有很多方法要在原始方法中添加确认对话框。因此我们决定构建一个自定义装饰器。

@Component({...})
export class HeroComponent {
  constructor(private dialog: MatDialog) {}

  @confirmByDialog(this.dialog)
  deleteHero() { ... }
}

export function confirmByDialog (dialog: MatDialog): MethodDecorator {
  return (target: Function, key: string, descriptor: any) => {
    const originalMethod = descriptor.value;

    descriptor.value = (...args: any[]) => {
      const dialogRef = dialog.open(ConfirmationDialogComponent);
      return dialogRef
        .afterClosed()
        .subscribe((confirmed: boolean) => {
          if (confirmed) {
            originalMethod();
          }
        });
    };

    return descriptor;
  };
}

但是这种方法行不通，因为

Cannot read property 'dialog' of undefined (hero.component.ts)

如何将附加参数传递给装饰器？我已经考虑过将 dialog 传递给原始函数本身以通过 args 访问它，但这对我来说听起来真的很肮脏？

提前致谢！

Answer 1

您无法访问装饰器参数中的实例字段。装饰器应用于 class 而不是实例。

简单的解决方案是传入对话框字段的名称，但这意味着该字段需要 public。

您还需要更改转发参数的方式 this。由于我们需要访问传入的实际值，因此我们不能使用箭头函数，我们需要使用 apply 转发 this

class HeroComponent {
  constructor(public dialog: MatDialog) { }

  @confirmByDialog("dialog") // Checked by the compiler.
  deleteHero() { }
}
function confirmByDialog<K extends string>(dialog: K) {
  return (target: Record<K, MatDialog>, key: string, descriptor: any) => {
    const originalMethod: Function = descriptor.value;

    descriptor.value = function (this: Record<K, MatDialog>, ...args: any[]) {
      const dialogRef = this[dialog].open(ConfirmationDialogComponent);
      return dialogRef
        .afterClosed()
        .subscribe((confirmed: boolean) => {
          if (confirmed) {
            originalMethod.apply(this, ...args);
          }
        });
    };
    return descriptor;
  };
}

将附加参数传递给 angular 组件内的方法装饰器

Pass aditional arguments to method decorator inside angular component

angular

typescript

decorator

angular-decorator