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

Posted 2023-02-23

【中文标题】如何使用 Angular Decorator 减少重复代码？

【英文标题】：How to use Angular Decorator to reduce repetitive code?

【发布时间】：2017-11-09 01:44:33

【问题描述】：

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

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

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

【参考方案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