AuthService總是在默認狀態

Question

注入這裏是我的代碼

import {User} from '../models/user'; 
import {Injectable} from '@angular/core'; 
import {Http, Headers, RequestOptions, Response} from '@angular/http'; 
import {AuthHttp} from 'angular2-jwt'; 
import {Router} from '@angular/router'; 
import {Config} from '../app.constants'; 
import {Observable, ReplaySubject} from 'rxjs/Rx'; 

@Injectable() 
export class AuthService { 
    public currentUser: ReplaySubject<User> = new ReplaySubject<User>(1); 
    public loggedIn = false; 
    constructor(public http: Http, 
       public authHttp: AuthHttp, 
       private router: Router) { 
    } 

    public setCurrentUser(user: User) { 
    this.loggedIn = true; 
    this.currentUser.next(user); 
    } 

} 

此路由

export const routes: Routes = [ 
    { 
    children: [ 
     { 
     component: HomeComponent, 
     path: '' 
     }, 
     { 
     canActivate: [CanActivateGuard], 
     component: UploadComponent, 
     path: 'upload', 
     }, 
     { 
     component: RegisterComponent, 
     path: 'register' 
     }, 
     { 
     component: LoginComponent, 
     path: 'login' 
     }, 
    ], 
    component: WebComponent, 
    path: '', 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule], 
}) 
export class WebRoutingModule { 
} 

時使用的登錄驗證碼設置this.loggedIn爲true

let user = new User(data.user); 
this._auth.setCurrentUser(user); 

問題發生在登錄後

我在這裏的調試結果

上web.component.ts我加在toggleSearchInput方法console.log(this._auth)

toggleSearchInput() { 
    console.log(this._auth) 
    this.searchInputExpanded = !this.searchInputExpanded; 
    } 

當我點擊該按鈕，它控制檯登錄到我loggedd正確_auth在=真

上guard.service.ts我加入on canActivate方法console.log(this._auth)

public canActivate() { 
    console.log(this._auth) 
    if (!this.logged) { 
     this.router.navigate([ 'login' ]); 
    } 
    return this.logged; 
    } 

並檢查控制檯e每次我點擊上傳..它控制檯我身份驗證服務就像沒有發生它，登錄= false即使登錄後...你知道爲什麼這麼說嗎？

爲什麼不改變

Answer 1

你的服務的服務被實例化其中進口它的每個模塊。如果你想跨多個模塊使用你的服務，你需要放入一個模塊（例如SharedModule）並導入，使用.forRoot（）導入一次，然後在其他模塊中以正常方式導入。就像這樣：

SharedModule

@NgModule({ 
    imports: [ ..., HttpModule ], 
    declarations: [ 
    ... 
    ] 
}) 
export class SharedModule { 
    static forRoot(): ModuleWithProviders { 
    return { 
     ngModule: SharedModule, 
     providers: [ 
     AuthService, 
     ... 
     ] 
    }; 
    } 
} 

的AppModule

@NgModule({ 
    declarations: [ ... ], 
    imports: [ ..., SharedModule.forRoot()], 
    providers: [ ... ], 
    bootstrap: [AppComponent], 
    entryComponents: [ ... ] 
}) 
export class AppModule { } 

WebModule

@NgModule({ 
    imports: [ ..., SharedModule ], 
    declarations: [...] 
}) 
export class WebModule { }