Question

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

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

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

Answer 1

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

<强> app.module.ts

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

  static injector: Injector;
}

页-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

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

1 个答案: