Question

我正在开发一个Angular2应用程序，用户可以在其中注册并登录。要处理会话 - 出于本讨论的目的，这意味着如果用户登录或不登录，则只显示一个标志 - 我创建了一个看起来很好的服务像这样：

import {Injectable} from 'angular2/core';

@Injectable()
export class SessionService {
  private _status:boolean;

  constructor () {
    if(1 == 1) {
      this._status = true;
    }
    console.log("New SessionService");
  }

  isLoggedIn() {
    return this._status;
  }

  logOut() {
    this._status = !this._status;
  }
}

现在我想在模板中使用isLoggedIn（）方法来显示或隐藏某些UI元素/菜单项。问题很简单：如何在整个应用程序中使用此服务的一个中心实例？

我为我的AppComponent尝试过类似的东西：

(...)
import {SessionService} from '../services/session.service';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app/app.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [SessionService]
})
@RouteConfig([
  ...
])
export class AppComponent {
  constructor(private _userService: UserService, private _sessionService: SessionService) {}
}

对于其他（子）组件基本相同：

(...)
import {SessionService} from '../services/session.service';

@Component({
  templateUrl: 'app/user/login.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [HTTP_PROVIDERS, UserService, SessionService]
})
export class LoginComponent {
  model = {email: "", password: ""}

  constructor(private _userService: UserService, private _sessionService: SessionService) {}

  onSubmit() {
      this._sessionService.logOut();
  }
}

我对此的观察是： - 在控制台中我看到输出“New SessionService”两次（参见SessionService的构造函数） - 当我在LoginComponent中触发this._sessionService.logOut（）方法时，所有绑定到LoginComponent模板的_sessionService.isLoggedIn（）的元素都会消失/出现，但是对于App模板中的其他绑定元素，没有任何变化。

我对Angular2有一个基本的误解吗？这种方法合理吗？如果不是，那将是另一种选择？

非常感谢！

PS：我希望代码量不是太多......

Answer 1

您的问题出在LoginComponent。不要将SessionService放在providers数组中。这会创建第二个实例。

将SessionService放在父组件的提供程序中，该提供程序对将使用该服务的所有组件都是通用的。这将使其可用于其所有子组件。在这种情况下，只需AppComponent。

然后，您可以将SessionService放在将使用它的每个子组件的构造函数中。

Angular2：中央会话服务？

1 个答案: