javascript - Hvordan bruke Angular-dekoratør for å redusere repetitiv kode?

Jeg har en I18nService som må initialiseres i 90 % av komponentene mine. Prosedyren for å gjøre dette er å importere tjenesten, importere oversettelsesfilen, implementere ngOnInit() og kalle tjenestens init()-funksjon.

Nå prøver jeg å redusere den repetitive koden ved hjelp av klasse-dekoratører. Problemet jeg for øyeblikket står overfor er å bruke min I18nService inne i dekoratøren, siden dekoratører ser ut til å kjøre ved kompileringstid. Jeg prøvde å løse problemet med injektorer og fulgte denne artikkelen: https://netbasal.com/inspiration-for-custom-decorators-in-angular-95aeb87f072c, men fikk AppModule undefined.

Hvordan kan jeg løse problemet? Er dekoratører det riktige valget for å oppnå dette i utgangspunktet?

Svar #1

Du kan lagre Injector i konstruktøren AppModule og deretter bruke den inne i den patchede ngOnInit-metoden for å få tak i en tjeneste registrert i appen din

app.module.ts

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

  static injector: Injector;
}

side-spor.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-eksempel

Relaterte artikler