route - meta tags angular 6

Almacenamiento de la instancia del inyector para su uso en componentes

Question

Antes de RC5, estaba usando appref inector como un localizador de servicios como este:

Startup.ts

bootstrap(...)
.then((appRef: any) => {
    ServiceLocator.injector = appRef.injector;
});

ServiceLocator.ts

export class ServiceLocator {
    static injector: Injector;
}

componentes:

let myServiceInstance = <MyService>ServiceLocator.injector.get(MyService)

Ahora haciendo lo mismo en bootstrapModule (). Luego () no funciona porque los componentes parecen comenzar a ejecutarse antes de la promesa.

¿Hay alguna forma de almacenar la instancia del inyector antes de que se carguen los componentes?

No quiero usar la inyección de constructor porque estoy usando el inyector en un componente de base que se deriva de muchos componentes y prefiero no inyectar el inyector en todos ellos.

Answer 1

He logrado hacerlo usando boostrapping manual. No use la declaración " bootstrap: [AppComponent] " en @NgModule , use el método ngDoBootstrap lugar:

export class AppModule {
    constructor(private injector: Injector) {
    }

    ngDoBootstrap(applicationRef: ApplicationRef) {
        ServiceLocator.injector = this.injector;
        applicationRef.bootstrap(AppComponent);
    }
}

Answer 2

Otra solución con angular 2.0.0 final:

platformBrowserDynamic().bootstrapModule(AppModule, [
  {
    defaultEncapsulation: ViewEncapsulation.Emulated,
    providers: [
      { provide: TRANSLATIONS, useValue: TRANSLATION },
      { provide: TRANSLATIONS_FORMAT, useValue: ''xlf'' },
      { provide: LOCALE_ID, useValue: ''fr'' }
    ]
  }
]).then((modref: NgModuleRef<any>) => {
  appInjector(modref.injector);
});

Answer 3

Para TypeScript y Angular 5 de hoy, evitando WARNING in Circular dependency detected al importar el inyector global, primero declare un ayudante, por ejemplo, app-injector.ts :

import {Injector} from ''@angular/core'';

/**
 * Allows for retrieving singletons using `AppInjector.get(MyService)` (whereas
 * `ReflectiveInjector.resolveAndCreate(MyService)` would create a new instance
 * of the service).
 */
export let AppInjector: Injector;

/**
 * Helper to set the exported {@link AppInjector}, needed as ES6 modules export
 * immutable bindings (see http://2ality.com/2015/07/es6-module-exports.html) for 
 * which trying to make changes after using `import {AppInjector}` would throw:
 * "TS2539: Cannot assign to ''AppInjector'' because it is not a variable".
 */
export function setAppInjector(injector: Injector) {
    if (AppInjector) {
        // Should not happen
        console.error(''Programming error: AppInjector was already set'');
    }
    else {
        AppInjector = injector;
    }
}

A continuación, en tu AppModule , AppModule usando:

import {Injector} from ''@angular/core'';
import {setAppInjector} from ''./app-injector'';

export class AppModule {
    constructor(injector: Injector) {
        setAppInjector(injector);
    }
}

Y donde sea necesario, use:

import {AppInjector} from ''./app-injector'';
const myService = AppInjector.get(MyService);