Angular2ユニークな変数設定の問題

Question

私はチュートリアルをオンラインで行ってきましたが、単純なログインコンポーネントがありますが、期待どおりに動作していないようです。順番に変数を設定し、実際にログの世話をするためにルートCanActivate

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

import { AuthService } from '../_services/auth.service'; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private _router: Router, private _authService: AuthService) { 

    } 

    canActivate() { 
     console.log("auth: " + this._authService.isLoggedIn); 
     if (this._authService.isLoggedIn == true) { 
      // logged in so return true 
      return true; 
     } else { 
      // not logged in so redirect to login page 
      this._router.navigate(['login']); 
      return false; 
     } 
    } 
} 

そして最後に、私の認証サービスに設定されている

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { FormGroup } from '@angular/forms'; 

// Services 
import { AuthService } from '../../_services/auth.service'; 

@Component({ 
    styles: [require('./login.component.css')], 
    template: require('./login.component.html'), 
    providers: [AuthService] 
}) 
export class LoginComponent { 

    constructor(private _router: Router, private _authService: AuthService) { 

    } 

    login(form) { 
     var email = form.form._value.email; 
     var password = form.form._value.password; 
     var response = this._authService.login(email, password); 
     if (response) { 
      this._router.navigate(['dashboard']); 
     } else { 
      console.log("error"); 
     } 
    } 
} 

認証ガード、：私は、以下のログイン・コンポーネントを持っています私のcanActivate認証ガードで使用されています。私は、ログイン機能を実行すると、変数isLoggedInがfalseに設定されているダッシュボードにナビゲートする際に

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

@Injectable() 
export class AuthService { 
    isLoggedIn = false; 

    constructor(private http: Http) { } 

    login(username, password) { 
     this.isLoggedIn = true; 
     console.log("set: " + this.isLoggedIn); 
     return true; 
    } 

    logout() { 
     this.isLoggedIn = false; 
    } 
} 

は今isLoggedIn変数が正常にtrueに設定されているが、ガードが実行されたとき。今私の心の中では、ログイン機能が実行されたときにそれを設定してから、それが正しいと思うでしょう。

Many Thanx。ロス

Answer 1

コンポーネントの線

providers: [AuthService] 

作成およびコンポーネントの各インスタンスのためのAuthServiceのインスタンスを注入する角度指示します。したがって、他のサービスではおそらくNgModuleプロバイダから取得したものとは異なる、コンポーネント内のAuthServiceの別のインスタンスを取得します。

この行を削除し、ルートNgModule内に1つだけのAuthServiceプロバイダを宣言します。これにより、アプリケーションのすべてのコンポーネントとサービスで共有されます。