我有一个装饰器,它会ngOnInit
写一个console.log
日志装饰器.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);
}
};
};
}
和一个HelloComponent
使用@Log()
和导入服务的ngOnInit
你好.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”
@Log()
如果我从中删除HelloComponent
有效!
装饰器似乎破坏了组件范围:
ngOnInit.apply(this, args); // line 13: log.decorator.ts
在此调用之后,this.helloService
is undefined
in the ngOnInit
of HelloComponent
,但没有@Log()
,this.helloService
是一个HelloService
实例。
我该如何解决?
Stackblitz 上的实时示例: https ://stackblitz.com/edit/angular-7hhp5n