如何使用 Angular Decorator 减少重复代码？答案

【问题标题】：How to use Angular Decorator to reduce repetitive code?如何使用 Angular Decorator 减少重复代码？
【发布时间】：2017-11-09 01:44:33
【问题描述】：

我有一个需要在 90% 的组件中初始化的 I18nService。执行此操作的过程是导入服务、导入翻译文件、实现 ngOnInit() 并调用服务init() 函数。

现在我正在尝试借助类装饰器来减少重复代码。我目前面临的问题是在装饰器中使用我的 I18nService ，因为装饰器似乎在编译时运行。我试图解决注射器的问题并关注这篇文章：https://netbasal.com/inspiration-for-custom-decorators-in-angular-95aeb87f072c 但得到了AppModule undefined。

我该如何解决这个问题？装饰器是实现这一目标的正确选择吗？

【问题讨论】：

标签： javascript angular typescript service decorator

【解决方案1】：

您可以将Injector 存储在构造函数AppModule 中，然后在修补的ngOnInit 方法中使用它来获取在您的应用中注册的一些服务

app.module.ts

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

  static injector: Injector;
}

page-track.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

【讨论】：