Zapisywanie instancji wtryskiwacza do stosowania w elementach

Question

Przed RC5 używałem appref wtryskiwacz jako lokalizator usług takich jak to:

Startup.ts

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

ServiceLocator.ts

export class ServiceLocator { 
    static injector: Injector; 
} 

składniki:

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

Nie w robi to samo w bootstrapModule(). then() nie działa, ponieważ wydaje się, że komponenty zaczynają działać przed obietnicą.

Czy istnieje sposób na zapisanie instancji wtryskiwacza przed załadowaniem komponentów?

Nie chcę używać wtrysku konstruktora, ponieważ używam wtryskiwacza w komponencie bazowym, który pochodzi z wielu komponentów i raczej nie wstrzykiwam wtryskiwacza do wszystkich z nich.

Answer 1

Udało mi się to zrobić, korzystając z ręcznego wspomagania. Nie używaj "bootstrap: [AppComponent]" deklarację w @NgModule użyć ngDoBootstrap metody Zamiast:

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

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

Answer 2

Innym rozwiązaniem z kanciasty 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

Na dzisiejszym maszynopis i kątowe 5, unikając WARNING in Circular dependency detected podczas importowania globalny wtryskiwacz, najpierw zadeklaruj pomocnika, np 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; 
    } 
} 

Następnie w AppModule, ustaw ją za pomocą:

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

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

i gdziekolwiek potrzebne, przeznaczenie:

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