如何在角注入服务中使用自定义装饰器答案

【问题标题】：How to use custom decorator in angular injectable service如何在角注入服务中使用自定义装饰器
【发布时间】：2018-01-07 20:37:44
【问题描述】：

我想在我的 angular2 服务中使用“AOP”，例如，我想请求我的服务器并获取数据，我会检查它的返回码，我会通过这个返回码显示消息，

例如：这是我的服务：

@Injectable()
export class TemplatesService {

constructor(private http: HttpHelper) {

}

@show_message
public templates(search_params = {}): Observable<Array<Template>> {
    let params = new URLSearchParams()
    for (let key in search_params) {
        params.set(key, search_params[key])
    }
    return this.http.AUTH_HTTP_GET('api/templates.json?per=10000', params).map(data=> this.http.extractData(data).templates)
}
}

HttpHelper 是我的 Angular 2 http 包装器，用于一些自定义 http 标头、正文等。

show_message 装饰器：

export function  show_message(target:any,key:any,descriptor:any){
    console.log(target,key ,descriptor)
    const method = descriptor.value

    descriptor.value = (...args:any[]) => {

        let ret = method.apply(target, args);

        return ret;
    }

    console.log(method)

    return descriptor;
}

这是错误：

    VM40526 TemplateIndexComponent_Host.ngfactory.js:5
 ERROR TypeError: Cannot read property 'AUTH_HTTP_GET' of undefined
        at Object.TemplatesService.templates (eval at <anonymous> (app.cfb7cea….js:194), <anonymous>:31:25)
        at TemplatesService.descriptor.value [as templates] (eval at <anonymous> (app.cfb7cea….js:2349), <

【问题讨论】：

标签： angular decorator

【解决方案1】：

您传递了错误的上下文。

根据documentation

方法装饰器的表达式将作为函数调用在运行时，使用以下三个参数：

1) 静态成员的类的构造函数，或者实例成员的类的原型。

2) ..

所以 target 在您的情况下是 TemplatesService.prototype 但您应该使用当前实例调用方法。

试试下面的

descriptor.value = function(...args:any[]) { // don't forget function 
  let ret = method.apply(this, args); // pass current context

【讨论】：