Búsqueda de sitios web

typescript - Herencia de Componentes en Angular 7 usando un inyector global


He estado usando el enfoque descrito en una publicación del blog de MSDN para simplificar la extensión de componentes sin necesidad de proporcionar todas las dependencias en la llamada super(). Sin embargo, esto ha dejado de funcionar en Angular 7 con TypeScript 3.

Entonces, lo que está pasando es que después de la inicialización, estoy tratando de almacenar el inyector en un servicio y después intento recuperarlo.

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

y luego en el componente base obtengo el inyector almacenado

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

Sin embargo, al mirar la consola, el orden está invertido: primero se llama al constructor de BaseComponent después de que se resuelve la promesa de boostrapModule().

No estoy seguro si el arranque (bootstrapping) se está comportando de manera diferente ahora en Angular 7, como sugieren los registros de la consola. La misma solución funcionaba en Angular 6 con Typescript 2, pero con la versión 7 ha dejado de funcionar. Aquí hay un stackblitz de la aplicación rota basado en el artículo de MSDN: https://stackblitz.com/edit/component-inheritance-angular-7

Entonces, la pregunta fundamental es: ¿cómo garantizar que AppInjector.setInjector() ocurra antes de AppInjector.getInjector()?

Respuesta #1

He configurado el servicio de inyector en AppModule y eso significa que inyectaré Injector y lo estableceré en el constructor de AppModule y almacenaré el servicio de inyector en un objeto global

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

demostración

Artículos relacionados