Problem mit global sichtbaren Service in Angular 2

Question

Ich bin zu Service zu binden, die ohne Import in Komponente sichtbar wäre.

Meine Bootstrap-Funktion:

export function main(initialHmrState?: any): Promise<any> { 
    console.log(APP_PROVIDERS); 
    return bootstrap(App, [ 
    ...PLATFORM_PROVIDERS, 
    ...ENV_PROVIDERS, 
    ...APP_PROVIDERS 
    ]) 
    .then(decorateComponentRef) 
    .catch(err => console.error(err)); 
} 

App-Anbieter Definition:

export * from './app.component'; 
export * from './user.state'; 
export * from './app.service'; 

import { UserState } from './user.state'; 
import { AppState } from './app.service'; 

// Application wide providers 
export const APP_PROVIDERS = [ 
    UserState, 
    AppState 
]; 

und ich kann es nicht

constructor(private userState: UserState) {} 

in Komponenten Konstruktor aufrufen, wie ich mein Problem beheben kann?

Answer 1

entweder durch Import oder durch einen String-Token oder OpaqueToken und `@Inject mit()

export const APP_PROVIDERS = [ 
    {provide: 'UserState', useClass: UserState}, 
    AppState 
]; 

constructor(@Inject('UserState') private userState: any) {} 

Answer 2

Es gibt zwei Teile:

• Definition der Anbieter Namen Typen
• Verwenden der Typen für die Injektion

In beiden Fällen müssen Sie entsprechende Typen importieren. Andernfalls werden sie nicht aufgelöst ...

Beachten Sie, dass die Verwendung von Typen für die Abhängigkeitsinjektion nicht zwingend erforderlich ist. Sie könnten schließlich OpaqueToken s verwenden:

export const SOME_TOKEN = new OpaqueToken('sometoken'); 
let provider = { provide: token, useClass: UserState }; 

und verwenden es:

constructor(@Inject(SOME_TOKEN) private userState: UserState) {} 

Aber in diesem Fall müssen Sie auch die undurchsichtige Token importieren ...