Angular2 全局服务商

Question

/app
        - app.component.ts 
        - app.component.html (hide/show: menu bar)
        - app.global.service.ts (Public varible LoginSuccess:boolean)
        - main.ts
        /student
            - student.ts
            - student.service.ts
            - student.component.ts
            - student.component.html
        /security
            - login.component.ts (LoginSuccess = true)
            - login.component.html

在我的 Angular2 应用程序中，我有一个简单的需求，我想根据登录成功显示隐藏菜单栏。为此，我创建了一个服务，它只有一个 LoginSuccess bool 变量，我将在登录组件上设置它，并将在 app.component.html 上用于 [hidden]=LoginSuccess 导航标签。

我面临的问题是，即使在通过 app.component.ts 和 login.component.ts 的 constructor 注入(inject) app.global.service.ts 之后 值不会持久存在，每个构造函数都会创建 app.global.service.ts 的新对象。

问题:如何通过服务实现跨应用程序持久化单一值。在 Angular2 文档的某个地方，我确实读到 Injectable 服务是单例的。

Answer 1

您应该在引导时提供 GlobalService，而不是为每个组件提供:

bootstrap(AppComponent, [GlobalService])

@Component({
  providers: [], // yes
  // providers: [GlobalService], // NO.
})
class AppComponent {
  constructor(private gs: GlobalService) {
    // gs is instance of GlobalService created at bootstrap
  }
}

这样 GlobalService 将是一个单例。

有关更高级的方法，请参阅 this answer .