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

Question

我正在制作 Angular2 应用程序。我有一个登录服务class，它是在应用程序级别提供的，供登录组件和身份验证保护服务使用。

如果我对 DI 的理解是正确的，一旦通过 AppModule 的提供者元数据在应用程序级别提供服务，在注入时，将向所有组件提供相同的服务实例，从而更改成员一个组件的服务 class 将反映在另一个服务或组件 class.

我在应用程序级别提供了登录服务 class 但是从一个组件更改服务的成员变量并没有反映在其他组件中。我的登录组件将 loggedIn 变量更改为 true，但是当我从 auth guard 服务访问它时，它仍然得到 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;
        }
    }
}

登录服务

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。我检查了所有模块class是否有多个登录服务提供商但没有。

感谢任何帮助。

Answer 1

如果您将服务添加到 module.ts

以外的任何其他组件的提供程序数组中，则可能会发生这种情况

Answer 2

看来是我提交表单的方式有问题。我在单击按钮而不是 (ngSubmit) 时调用了 login() 方法，因此当我单击登录按钮时，首先会触发单击事件，然后触发提交事件。提交事件正在重新加载整个应用程序，导致它创建所有内容的新实例。始终使用 (ngSubmit) 事件提交表单。

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

Using application wide single instance of service in angular2

angular

dependency-injection

angular2-services