angle2のアプリケーション全体の単一インスタンスの使用

Question

私はAngular2アプリケーションを作成しています。私はアプリケーションレベルで提供され、ログインコンポーネントと認証ガードサービスによって使用されるログインサービスクラスを持っています。

DIを正しく理解していれば、サービスがAppModuleのプロバイダメタデータを通じてアプリケーションレベルで提供されると、サービスの同じインスタンスがすべてのコンポーネントに提供されます。あるコンポーネントによるサービスクラスは、他のサービスまたはコンポーネントクラスに反映されます。

アプリケーションレベルでログインサービスクラスを提供しましたが、サービスのメンバー変数を1つのコンポーネントから別のコンポーネントに変更していません。ログインコンポーネントはloggedIn変数をtrueに変更しますが、認証ガードサービスからアクセスすると、false値が返されます。

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; 
     } 
    } 
} 

LoginService

：後

は私のコードスニペットです

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になります。ログインサービスのプロバイダが複数ある場合は、すべてのモジュールクラスをチェックしましたが、そうではありません。

何か助けていただければ幸いです。

Answer 1

以外の他のコンポーネントのプロバイダの配列にあなたのサービスを追加する場合私がフォームを送信方法が問題だったようだが起こることがあります。 (ngSubmit)ではなく、ボタンのクリックでlogin()メソッドを呼び出したので、ログインボタンをクリックすると、最初にクリックイベントが発生し、その後サブミットイベントが発生します。そして、提出イベントはアプリケーション全体をリロードして、すべてのインスタンスを新たに作成しました。常に(ngSubmit)イベントを使用してフォームを送信してください。

Answer 2

これは、あなたがmodule.ts