Angular 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);
            }
        };
    };
}

和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

Answer 1

箭頭函數強制上下文this是封閉的詞匯上下文，它是Log函數的執行上下文。

要有組件上下文，您應該使用簡單的函數表達式：

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

分叉Stackblitz