typescript - Angular 7-komponentarv med hjälp av en global injektor


Jag har använt tillvägagångssättet som beskrivs i ett MSDN-blogginlägg för att förenkla utökning av komponenter utan att behöva tillhandahålla alla beroenden i super()-anropet. Men detta har slutat fungera i Angular 7 med Typescript 3.

Så vad som händer är att efter uppstart försöker jag lagra injektorn i en tjänst och därefter försöker jag hämta den.

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  // Store module's injector in the AppInjector class
  console.log('Expected #1: storing app injector');
  AppInjector.setInjector(ref.injector);
})

och sedan i bas-komponenten hämtar jag den lagrade injektorn

export class BaseComponent {
  constructor() {
    console.log('Expected #2: retrieving stored injector');
    const injector = AppInjector.getInjector();
  }
}

Men om man tittar på konsolen är ordningen omvänd - först anropas BaseComponent:s konstruktor vilket sker efter att löftet från boostrapModule() har lösts.

Jag är inte säker på om bootstrapping beter sig annorlunda nu i Angular 7, som konsolloggarna antyder. Samma lösning brukade fungera i Angular 6 med Typescript 2, men med version 7 har den slutat fungera. Här är en stackblitz av den trasiga appen baserad på MSDN-artikeln: https://stackblitz.com/edit/component-inheritance-angular-7

Så den grundläggande frågan är - hur man garanterar att AppInjector.setInjector() sker innan AppInjector.getInjector()?

Svar #1

Jag har ställt in injector-tjänsten i AppModule och det betyder att jag kommer att injicera Injector och ställa in det i konstruktören av AppModule och lagra injector-tjänsten i ett globalt objekt

export class AppModule { 
  constructor(injector:Injector){
  // Store module's injector in the AppInjector class
  console.log('Expected #1: storing app injector');
  AppInjector.setInjector(injector);
  }
}

demo

Relaterade artiklar