如何使用Angular Decorator來減少重複代碼？

Question

我有一個I18nService，需要在90％的組件中進行初始化。執行此操作的過程是導入服務，導入翻譯文件，執行ngOnInit（）並調用服務init()函數。

現在我試圖用類裝飾器幫助減少重複代碼。 我目前面臨的問題是在裝飾器中使用我的I18nService，因爲裝飾器似乎在編譯時運行。我試圖解決與注射器的問題，並按照這篇文章：https://netbasal.com/inspiration-for-custom-decorators-in-angular-95aeb87f072c 但得到AppModule undefined。

我怎樣才能解決這個問題？裝飾者是實現這一目標的正確選擇嗎？

Answer 1

你可以存儲在構造AppModuleInjector，然後用它裏面打補丁ngOnInit方法得到一些服務在您的應用程序註冊

app.module.ts

@NgModule({ 
    ... 
    providers: [AnalyticsService], 
}) 
export class AppModule { 
    constructor(private injector: Injector) { 
    AppModule.injector = injector; 
    } 

    static injector: Injector; 
} 

頁軌道。 decorator.ts

import { AnalyticsService, AppModule } from './app.module'; 

export function PageTrack(): ClassDecorator { 
    return function (constructor : any) { 
    const ngOnInit = constructor.prototype.ngOnInit; 
    constructor.prototype.ngOnInit = function (...args) { 
     let service = AppModule.injector.get(AnalyticsService); 
     service.visit(); 
     ngOnInit && ngOnInit.apply(this, args); 
    }; 
    } 
} 

app.component.ts

@Component({ 
    selector: 'my-app', 
    templateUrl: `./app.component.html` 
}) 
@PageTrack() 
export class AppComponent {} 

Plunker Example