Angular 2 RC 5 Injector undefined

时间:2016-08-25 11:42:26

标签: angular rootscope

我有一个注射器程序。 Injector从服务中给我一个唯一的实例,然后我可以像c#中的静态类或rootScope一样使用服务。在RC5中,注射器始终未定义。我有什么替代品?

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

let appInjectorRef: Injector;

export const appInjector = (injector?: Injector): Injector => {
    if (injector) {
        appInjectorRef = injector;
    }

    return appInjectorRef;
};

GlobalService:

import {Component, Output, EventEmitter} from '@angular/core';
import {Observable} from 'rxjs/Observable';

export class GlobalService {

    @Output()
    UsernameChanged = new EventEmitter<String>();
    LoggedInChanged = new EventEmitter<Boolean>();
    WaitGifChanged = new EventEmitter<Boolean>();

    private loggedIn: boolean;
    private username: string = "Username";
    private waitGif: boolean = false;

    constructor() {
        this.loggedIn = false;
    }

    public showWaitGif() {
        this.waitGif = true;
        this.WaitGifChanged.emit(true);
    }

    public hideWaitGif() {
        this.waitGif = false;
        this.WaitGifChanged.emit(false);
    }

    public Login(): void {
        this.loggedIn = true;
        this.LoggedInChanged.emit(true);
    }

    public Logout(): void {
        this.loggedIn = false;
        this.LoggedInChanged.emit(false);
    }

    public GetUsername(): string {
        return this.username;
    }

    public SetUsername(username: string): void {
        this.username = username;
        this.UsernameChanged.emit(this.username);
    }



    public GetLoggedInStatus(): boolean {
        return this.loggedIn;
    }

    public LoginCheck(): Observable<any> {
        return Observable.create((observer => {
            return (this.loggedIn);
        }));// (this.loggedIn);
    }
}

用法:

private LoginUser(username: string, password: string): void {
        let injector: Injector = appInjector();
        var globalService: GlobalService = injector.get(this.globalservice);
        this.globalservice.Login();
        this.globalservice.SetUsername("Test 1");
    }

自举:

import {Globalservice} from './Service/Globalservice';
import {Component, provide, Injector, ComponentRef/*, ViewResolver*/} from '@angular/core/index.d';
import {bootstrap} from '@angular/platform-browser-dynamic/index.d';
import {HTTP_PROVIDERS} from '@angular/http';
import {appInjector} from './app.injector';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {provideRouter, ROUTER_DIRECTIVES, RouterConfig, provideRoutes } from '@angular/router';
import {AppResolver}     from './app.resolver';
import {AppComponent}     from './app.component';

bootstrap(AppComponent, [
        provideRoutes,
        provide(LocationStrategy, { useClass: HashLocationStrategy }),
        provide(Window, { useValue: window }),
        HTTP_PROVIDERS,
        Globalservice,
        provide(ViewResolver, { useClass: AppResolver })
        ]).then((appRef: ComponentRef) => {
            appInjector(appRef.injector);
        });

]);

的AppModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import {RouterModule} from "@angular/router";
import {AppsAdminComponent} from './AppsAdmin/AppsAdmin.component';
import {AppsManagerComponent} from './AppsManager/AppsManager.component';
import {LoginComponent} from './Login/login.component';
import {LogoutComponent} from './Logout/logout.component';
import { Routing }  from './App.routing';
import {HttpModule} from '@angular/http';
import {AppsManagerService} from './Service/AppsManager.service';
import {GlobalService} from './Service/GlobalService';
import {provide} from '@angular/core';
import {SharedModule} from './Shared/Shared.module';

@NgModule({
    declarations: [
        AppComponent,
        LoginComponent,
        LogoutComponent,
        AppsAdminComponent,
        AppsManagerComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        Routing
    ],
    providers: [
        GlobalService
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}

0 个答案:

没有答案