Angular2:中央会话服务？

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()方法时,所有绑定到_sessionService.isLoggedIn()的元素LoginComponent模板的消失/出现,但对于App模板中的其他绑定元素,没有任何变化.

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

非常感谢!

PS:我希望代码量不要太多......

Answer 1

你的问题在于你的问题LoginComponent.不要把它SessionService放在providers数组中.这会创建第二个实例.

将SessionService所有父组件的提供者放入将使用该服务的所有组件中.这将使其可用于其所有子组件.在这种情况下,只是AppComponent.

然后,您可以将其SessionService放入将使用它的每个子组件的构造函数中.