角度7:自定义类装饰器销毁组件范围

Question

我有一个装饰器，ngOnInit写一个console.log

log.decorator.ts

export function Log(): ClassDecorator {
// Decorator Factory
return (target: Function) => {
const ngOnInit: Function = target.prototype.ngOnInit;
target.prototype.ngOnInit = ( ...args ) => {
console.log('ngOnInit:', target.name);
if ( ngOnInit ) {
ngOnInit.apply(this, args);
}
};
};
}

以及使用@Log()并导入ngOnInit中使用的服务的HelloComponent

hello.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Log } from './log.decorator';
import { HelloService } from './hello.service';
@Component({
selector: 'hello',
template: `<p>Hello! thanks for help and open the browser console for see the error!</p>`,
styles: [``]
})
// if you remove @Log(), helloService.sayHello() works!
@Log()
export class HelloComponent implements OnInit  {
constructor(private helloService: HelloService){}
ngOnInit(){
this.helloService.sayHello();
}
}

但这会导致异常：

错误

类型错误：无法读取未定义的属性"sayHello">

如果我从HelloComponent中删除@Log()它就可以工作了！

装饰器似乎破坏了组件范围：

ngOnInit.apply(this, args); // line 13: log.decorator.ts

在此调用之后，this.helloService在HelloComponent的ngOnInit中undefined，但没有@Log()，this.helloService是一个HelloService实例。

我该如何解决这个问题？

Stackblitz上的实时示例： https://stackblitz.com/edit/angular-7hhp5n

Answer 1

箭头函数强制上下文this是封闭的词法上下文，并且它是Log函数的执行上下文。

要获得组件上下文，您应该使用简单的函数表达式：

target.prototype.ngOnInit = function( ...args ) {
...
}

分叉堆叠闪电战