在angular2中使用應用程序範圍廣泛的服務實例

我正在製作一個Angular2應用程序。我有一個在應用程序級別提供的登錄服務類，由登錄組件和身份驗證保護服務使用。在angular2中使用應用程序範圍廣泛的服務實例

如果我對DI的理解是正確的，一旦通過AppModule的提供程序元數據在應用程序級別提供服務，則向所有組件提供服務的相同實例，這些實例在注入時會因此而更改爲一個組件的服務類將反映在其他服務或組件類上。

我在應用程序級別提供了登錄服務類，但從一個組件更改服務的成員變量未反映到其他組件中。我的登錄組件將loggedIn變量更改爲true，但是當我從auth guard服務訪問它時，它仍然收到錯誤值。

以下是我的代碼片段：

的AppModule

@NgModule({ 
imports: [ 
    BrowserModule, 
    HttpModule, 
    ReactiveFormsModule, 
    MyModule 
], 
providers: [ 
    AuthguardService, 
    LoginService 
], 
declarations: [ 
    AppComponent, 
], 
exports: [ 
], 
bootstrap: [AppComponent], 
}) 
export class AppModule { }

AuthguardService

import { Injectable } from '@angular/core'; 
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 

import { LoginService } from './mymodule/login'; 

@Injectable() 
export class AuthguardService implements CanActivate { 

    constructor(
     private service: LoginService, 
     private router: Router 
    ) { } 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean{ 
     let url: string = state.url; 
     return this.checkLogin(url); 
    } 

    private checkLogin(url: string){ 
     debugger; 
     if (this.service.isLoggedIn()) { 
      console.log(this.service.loggedIn); 
      return true; 
     } else { 
      console.log(this.service.loggedIn); 
      this.router.navigate(['/']); 
      return false; 
     } 
    } 
}

login服務

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class LoginService { 
    loggedIn: boolean = false; 
    constructor(
     http: Http 
    ){} 

    login(username: string, password: string){ 
     let header = new Headers({ 
      'Content-Type': 'application/json', 
      'Accept': 'application/json', 
     }); 
     return this.http.post(
      'http://localhost/api/login', 
      JSON.stringify({login:username,password:password}), 
      {headers: headers}).map((res: Response)=>{ 
       this.loggedIn = true; 
       return res.json(); 
      }) 
      .catch(this.handleError); 
    } 
    logout(){ 
     this.loggedIn = false; 
    } 
    isLoggedIn(){ 
     if(this.loggedIn == true){ 
      return true; 
     } else { 
      return false; 
     } 
    } 
    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
}

誰能告訴我我在做什麼錯在這裏。當我從登錄組件調用登錄服務時，登錄成功並且loggedIn變量設置爲true，但是當我嘗試將其重定向到其他路由並且AuthguardService使用登錄服務時，loggedIn的值爲false。如果有多個登錄服務提供程序但沒有，我檢查了所有的模塊類。

任何幫助表示讚賞。

來源

2016-12-05 kanra-san

您是否在重定向到其他路線時重新創建服務？嘗試使用單例設計模式（https://en.wikipedia.org/wiki/Singleton_pattern）來實現該服務。然後它將創建一個對象並將其返回給所有請求。我認爲它會起作用。 :) –

我已經閱讀了很多關於angular2中單例服務的文章。他們都說angular2使用HIERARCHICAL DEPENDENCY INJECTION，所以如果我必須使用同一個服務類的實例，我只需要在根級別提供它，並從我已經完成的其他模塊和組件移除提供者元數據。但我仍然無法得到結果。 –

請嘗試loggedIn變量作爲靜態（靜態loggedIn：布爾=假）。我瘦它會工作:) –

看來，我提交表單的方式是問題以外的任何其他部件的供應商陣列中添加您的服務可能出現這種情況。我在按鈕點擊時調用了login()方法，而不是(ngSubmit)，所以當我點擊登錄按鈕時，首先點擊事件會觸發然後提交事件。提交事件正在重新加載整個應用程序，導致它創建一切的新實例。始終使用(ngSubmit)事件提交表單。

來源

2016-12-13 11:29:11

，如果你不是module.ts

來源

2016-12-05 10:15:24

多次檢查，但我沒有提供任何其他地方除了app.module.ts –

在angular2中使用應用程序範圍廣泛的服務實例

回答

相關問題