Javascript Angular 2共享数据服务不工作

我已经建立了一个共享数据服务，该服务旨在保存用户的登录详细信息，然后可以用来在标题上显示用户名，但我无法让它工作

以下是我的缩写代码：

// Shared Service
@Injectable()
export class SharedDataService {

    // Observable string source
    private dataSource = new Subject<any>();

    // Observable string stream
    data$ = this.dataSource.asObservable();

    // Service message commands
    insertData(data: Object) {
        this.dataSource.next(data)
    }
}

我可以在serviceinsertdata方法中添加控制台日志，该方法支持正在更新的模型，但OnInit方法不反映更改

我写的代码非常受此启发，它确实有效，所以我不知道哪里出了问题

在这里发布之前，我尝试了其他一些尝试。同样，这两个都可以在演示中使用，但在我的应用程序中不能

我用的是Angular 2.4.8

浏览不同的教程和论坛帖子，都会发现如何让共享服务正常工作的类似例子，所以我猜我做错了什么。我对AngularJS背景下的Angular2建筑相当陌生，这是第一件让我真正着迷的事情

---

谢谢

将其添加到AppModule的@NgModule.providers数组中：

如果将其添加到@Component.providers数组中，则将SharedDataService实例的作用域限制为该组件及其子组件

---

换句话说，每个组件都有自己的注入器，这意味着HeaderComponent将创建自己的SharedDataService实例，loginComponent将创建自己的实例。

将其添加到AppModule的@NgModule.providers数组中：

如果将其添加到@Component.providers数组中，则将SharedDataService实例的作用域限制为该组件及其子组件

---

换句话说，每个组件都有自己的注入器，这意味着HeaderComponent将创建自己的SharedDataService实例，而loginComponent将创建自己的实例。

这似乎是理解Angular依赖项注入时经常遇到的问题

基本问题在于如何配置服务的提供者

简短版本： 始终在NgModule级别配置提供程序，除非您希望为特定组件提供单独的实例。只有这样，您才能将其添加到您想要单独实例的组件的providers数组中

长版本： AngularJS新的依赖注入系统允许您拥有多个服务实例，如果您这样做的话，这与AngularJS形成对比，即Angular1只允许单例。如果您在NgModule级别为您的服务配置提供程序，您将获得由所有组件/服务等共享的服务的单个实例。但是，如果您将组件配置为也具有提供程序，则该组件及其所有子组件将获得可共享的服务的不同实例。如果您需要，此选项允许使用一些功能强大的选项

这是基本模型。当然，这并不是那么简单，但是默认情况下在NgModule级别配置提供者的基本规则（除非您明确希望为特定组件提供不同的实例）将使您走得更远

当你想潜得更深的时候

还要注意，延迟加载也使这个基本规则复杂化，所以再次检查文档

编辑：

所以针对你的具体情况,

@Component({
    providers: [SharedDataService]  <--- remove this line from both of your components, and add that line to your NgModule configuration instead
})

---

在理解Angular的依赖注入时，这似乎是一个反复出现的问题

基本问题在于如何配置服务的提供者

简短版本： 始终在NgModule级别配置提供程序，除非您希望为特定组件提供单独的实例。只有这样，您才能将其添加到您想要单独实例的组件的providers数组中

长版本： AngularJS新的依赖注入系统允许您拥有多个服务实例，如果您这样做的话，这与AngularJS形成对比，即Angular1只允许单例。如果您在NgModule级别为您的服务配置提供程序，您将获得由所有组件/服务等共享的服务的单个实例。但是，如果您将组件配置为也具有提供程序，则该组件及其所有子组件将获得可共享的服务的不同实例。如果您需要，此选项允许使用一些功能强大的选项

这是基本模型。当然，这并不是那么简单，但是默认情况下在NgModule级别配置提供者的基本规则（除非您明确希望为特定组件提供不同的实例）将使您走得更远

当你想潜得更深的时候

还要注意，延迟加载也使这个基本规则复杂化，所以再次检查文档

编辑：

所以针对你的具体情况,

@Component({
    providers: [SharedDataService]  <--- remove this line from both of your components, and add that line to your NgModule configuration instead
})

如果将服务作为提供者放在任何组件中，每次都会调用构造函数。您可能希望在整个应用程序中拥有整个服务的唯一实例。要完成此操作，请将提供程序注入到您的NgModule提供程序中

---

r应用程序模块，在父视图中插入提供程序并将其添加到viewProviders。但是，在您的情况下，最好直接将服务注入AppModule。如果您将服务作为提供者放入任何组件中，则每次都会调用构造函数。您可能希望在整个应用程序中拥有整个服务的唯一实例。要完成此操作，请在应用程序模块的NgModule providers中插入提供程序，或者在父视图中插入提供程序，然后将其添加到viewProviders。不过，在您的情况下，最好直接将服务注入AppModuleThanks bougarfaoui el houcine、snorkpete和briosheje中。一刻钟之内，有三个极好的答案。谢谢大家的帮助。我误解了你的意思，你已经澄清了。谢谢布加法伊·埃尔霍辛、斯诺克佩特和布里奥舍伊。一刻钟之内，有三个极好的答案。谢谢大家的帮助。我误解了，你已经澄清了。

@Component({
    providers: [SharedDataService]  <--- remove this line from both of your components, and add that line to your NgModule configuration instead
})