Angular语言 - 自定义方法装饰器，在方法的开头和结尾触发 console.log()

Question

我想知道是否可以在 Angular 中创建自定义装饰器，当应用于方法时可以实现以下功能：

1. 方法开头的控制台日志
2. 方法末尾的控制台日志

例：

不带装饰器：

getRelationshipSource() {
  console.log('Entering getRelationshipSource method');
  this.referenceDataService.getRefData('RLNSHPSC').subscribe(res => {
    this.relationshipSource$.next(res);
  });
  console.log('Leaving getRelationshipSource method');
}

带装饰器

@LogMethod()
getRelationshipSource() {
  this.referenceDataService.getRefData('RLNSHPSC').subscribe(res => {
    this.relationshipSource$.next(res);
  });
}

Answer 1

方法装饰器完全可以执行您想要执行的操作。它截获修饰方法的调用。因此，您可以在调用修饰方法之前和之后进行记录。

log.decorator.ts

export function log( ) : MethodDecorator {
  return function(target: Function, key: string, descriptor: any) {
    const originalMethod = descriptor.value; 
    descriptor.value =  function (...args: any[]) {
      console.log(`Entering ${key} method`);
      const result = originalMethod.apply(this, args);
      console.log(`Leaving ${key} method` );
      return result;
    }
    return descriptor;
  }
}

在这个示例应用程序中，我在HelloComponent中使用它。

import { Component, Input } from '@angular/core';
import { log } from './log.decorator';
@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() name: string;
  @log()
  ngOnInit() {
    this.Add(10, 32);
  }
  @log()
  private Add(a: number, b: number) : number {
    return a +  b;
  }
}

控制台输出如下所示：

Entering ngOnInit method
Entering Add method
Leaving Add method
Leaving ngOnInit method