[英]Angular 7: custom class decorator destroy component scope
我有一个装饰器,在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);
}
};
};
}
和HelloComponent
使用@Log()
和导入使用的服务ngOnInit
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();
}
}
但这会导致异常:
错误TypeError:无法读取未定义的属性'sayHello'
如果我从HelloComponent
删除@Log()
它的工作原理!
装饰器似乎破坏了组件范围:
ngOnInit.apply(this, args); // line 13: log.decorator.ts
在此调用之后,在HelloComponent
this.helloService
中undefined
ngOnInit
,但是没有@Log()
, this.helloService
是一个HelloService
实例。
我该如何解决?
Stackblitz上的实例: https ://stackblitz.com/edit/angular-7hhp5n
箭头函数强制上下文this
是封闭的词汇上下文,它是Log
函数的执行上下文。
要有组件上下文,您应该使用简单的函数表达式:
target.prototype.ngOnInit = function( ...args ) {
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.