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布尔varilable，我会设置登录组件和将使用app.component.html为[hidden]=LoginSuccess导航标签与服务。

我现在面临的问题是，即使注入app.global.service.ts通constructor价值app.component.ts & login.component.ts不是持久的，并且每个构造函数创建app.global.service.ts的新对象之后。

问：我怎样才能实现跨应用程序坚持单一的价值直通服务。某处在Angular2文档，我也读了注射服务单。

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。

Answer 2

你应该有内部qazxsw POI的你注入的服务为app.component.ts的qazxsw POI和代替引导。

app.module.ts

这是基于截止目前app.component.ts构建。所以里面

...
import { MusicService } from './Services/music-service';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    providers: [MusicService],
    ...
})
export class AppComponent {

constructor(private MS: MusicService) {

}
...

你应该有地方Angular2加载index.html。

现在使用的任何其他组件使用内部只是将其导入：

<app-root>

并对其进行初始化：

AppComponent

摘要：

1. 导入到import { MusicService } from './Services/music-service';
2. 插入

   constructor(private MS: MusicService) {
   
   }

   作为app.component.ts
3. 在初始化构造
4. 每隔组件使用重复步骤2,3想使用它，在

参考：app.component.ts

Answer 3

作为Saxsa，关键的一点是定义应用注射器内，而不是在每个组件级别的服务提供商。要小心，不要定义两次服务提供商......否则，你将仍然有单独的服务实例。

这样，您就能够共享相同的服务实例。

这是因为Angular2的分层喷射器。有关详细信息，你可以看一下这个问题：

• provider

Answer 4

至于最终版本（2.0.0角）的：

导入服务和供应商阵列，像这样在注入它：

Angular Dependency Injection

Answer 5

与角6.0开始，打造一个集服务的首选方法是指定的，它应该在应用程序根目录中提供的服务。这是通过设置What's the best way to inject one service into another in angular 2 (Beta)?到

import { GlobalService } from './app.global.service';

//further down:
@NgModule({
  bootstrap: [ App ],
  declarations: [
    // Your components should go here 
  ],
  imports: [ 
    // Your module imports should go here
  ],
  providers: [ 
    ENV_PROVIDERS // By Angular
    // Your providers should go here, i.e.
    GlobalService
  ]
});

对服务的providedIn装饰完成：

root

Answer 6

我只是补充，因为我被困在这一点上，虽然我使用了Singelton，你也必须使用角路由strategie：

您无法使用HREF =“../我的路线”

造成这种新启动整个应用程序：

相反，你必须使用：routerLink =“../我的路线”