在angular2中使用应用程序范围的单一服务实例

我正在做一个有角度的申请。我有一个登录服务类，它是在应用程序级别提供的，由登录组件和身份验证保护服务使用

如果我对DI的理解是正确的，那么一旦通过AppModule的providers元数据在应用程序级别提供服务，就会向所有组件提供相同的服务实例，当被注入时，一个组件对服务类成员的更改将反映在另一个服务或组件类上

我已经在应用程序级别提供了login服务类，但是从一个组件更改服务的成员变量并没有反映在另一个组件中。我的login组件将loggedIn变量更改为true，但是当我从auth-guard服务访问它时，它仍然得到false值

以下是我的代码片段：

AppModule

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

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

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

AuthguardService

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

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

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

登录服务

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

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

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。我已经检查了所有模块类，如果有多个登录服务提供者，但没有

---

非常感谢您的帮助。

如果您将服务添加到模块以外的任何其他组件的提供商阵列中，则可能会发生这种情况。ts

如果您将服务添加到模块以外的任何其他组件的提供商阵列中，则可能会发生这种情况。ts

似乎是我提交表单的方式造成了问题。我在单击按钮时调用了

login（）

方法，而不是

（ngSubmit）

，因此当我单击登录按钮时，首先会触发click事件，然后触发submit事件。submit事件正在重新加载整个应用程序，导致它生成所有内容的新实例。始终使用

（ngSubmit）

事件提交表单。

我提交表单的方式似乎是问题所在。我在单击按钮时调用了

login（）

方法，而不是

（ngSubmit）

，因此当我单击登录按钮时，首先会触发click事件，然后触发submit事件。submit事件正在重新加载整个应用程序，导致它生成所有内容的新实例。始终使用

（ngSubmit）

事件提交表单。

是否在将服务重定向到其他路由时重新创建服务？尝试使用singleton设计模式（）来实现该服务。然后它将创建一个对象并将其返回给所有请求。我认为它会起作用我在angular2读过很多关于单身服务的帖子。他们都说angular2使用分层依赖注入，所以如果我必须使用服务类的同一个实例，我必须只在根级别提供它，并从其他模块和组件中删除提供者元数据，我已经这样做了。但是我仍然无法得到结果。请尝试将loggedIn变量作为静态变量（static loggedIn:boolean=false）。我想它会起作用的：）我也已经试过了。不幸的是，这也不起作用。噢：（静态变量属于类。因此，如果您从一个位置更改了它。所有位置都应该更改。我认为问题不在于您的服务类：/n您是否在将服务重定向到其他路由时重新创建了服务？请尝试使用单例设计模式（）实现该服务。然后它将创建一个对象并将其返回给所有请求。我认为它会起作用。：）我在angular2中读过很多关于单例服务的帖子。他们都说angular2使用分层依赖注入，所以如果我必须使用服务类的同一个实例，我必须只在根级别提供它，并从其他模块和组件中删除提供者元数据，我已经这样做了。但是我仍然无法得到结果。请尝试将loggedIn变量作为静态变量（static loggedIn:boolean=false）。我想它会起作用的：）我也已经试过了。不幸的是，这也不起作用。哦：（静态变量属于类。因此，如果您从一个位置进行更改，它应该在所有位置进行更改。我认为问题不在于您的服务类：/n检查了多次，但我没有在除app.module.t之外的任何其他位置提供它。检查了多次，但我没有在除app.module.ts之外的任何其他位置提供它