Angular 通过共享服务进行组件通信时出现问题

服务代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

  private messageSource= new BehaviorSubject <string> ("This is the default message.");
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string){
    this.messageSource.next(message);
  }

  constructor() { }

}

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-sibling',
  template:`
        {{message}}
        <button (click)="newMessage()">Click Me</button>
  ` ,
  styleUrls: ['./sibling.component.css'],
  providers: [DataService]
})
export class SiblingComponent implements OnInit {

  message: string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe( message => this.message = message);

  }

  newMessage(){
    this.data.changeMessage("This is a message from sibling.");
  }
}

<app-parent></app-parent>
<br>
<app-sibling></app-sibling>

@NgModule({   declarations: [
    AppComponent,
    ParentComponent,
    SiblingComponent,
    DataService   ]

同级代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

  private messageSource= new BehaviorSubject <string> ("This is the default message.");
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string){
    this.messageSource.next(message);
  }

  constructor() { }

}

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-sibling',
  template:`
        {{message}}
        <button (click)="newMessage()">Click Me</button>
  ` ,
  styleUrls: ['./sibling.component.css'],
  providers: [DataService]
})
export class SiblingComponent implements OnInit {

  message: string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe( message => this.message = message);

  }

  newMessage(){
    this.data.changeMessage("This is a message from sibling.");
  }
}

<app-parent></app-parent>
<br>
<app-sibling></app-sibling>

@NgModule({   declarations: [
    AppComponent,
    ParentComponent,
    SiblingComponent,
    DataService   ]

通过单击“在同级中单击我”按钮，父级和同级中的

消息

变量必须更改为这是来自同级的消息。但是，对于父级，这不会发生，并且这仍然是默认消息，会呈现到app.component.html。

---

您能帮我找出问题吗？

当您在组件级别提供服务时，意味着您创建了此服务的新实例。如果您希望您的组件共享一个服务实例，您应该在更高级别或模块上提供它

我怀疑您在模块上提供了相同的服务，请尝试删除：

providers: [DataService]

从

SiblingComponent

元数据

您的

@NgModule

可能看起来像：

@NgModule({   
  declarations: [
    AppComponent,
    ...
  ],
  providers: [
    DataService
  ]

另见

---

当您在组件级别提供服务时，意味着您创建了此服务的新实例。如果您希望您的组件共享一个服务实例，您应该在更高级别或模块上提供它

我怀疑您在模块上提供了相同的服务，请尝试删除：

providers: [DataService]

从

SiblingComponent

元数据

您的

@NgModule

可能看起来像：

@NgModule({   
  declarations: [
    AppComponent,
    ...
  ],
  providers: [
    DataService
  ]

另见

---

您只需从应用同级组件中删除提供者：[DataService]

在使用服务时，有两种方法

1.在组件中使用提供者-此方法将在此组件中创建服务的新实例

2.在NgModule中使用提供者-这种方法将创建一个在所有组件之间共享的单音实例，您可以通过在组件构造函数中注入服务来使用它 在您的例子中，您创建了两个实例，一个是全局实例，另一个是在同级组件中，因此父级和同级不在同一级别，您只需在NgModule中添加一次即可

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ParentComponent } from './parent/parent.component';
import { SiblingComponent } from './sibling/sibling.component';
import { DataService } from './data.service';

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    SiblingComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

您只需从应用同级组件中删除提供程序：[DataService]

在使用服务时，有两种方法

1.在组件中使用提供者-此方法将在此组件中创建服务的新实例

2.在NgModule中使用提供者-这种方法将创建一个在所有组件之间共享的单音实例，您可以通过在组件构造函数中注入服务来使用它 在您的例子中，您创建了两个实例，一个是全局实例，另一个是在同级组件中，因此父级和同级不在同一级别，您只需在NgModule中添加一次即可

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ParentComponent } from './parent/parent.component';
import { SiblingComponent } from './sibling/sibling.component';
import { DataService } from './data.service';

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    SiblingComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

通过从同级中删除它，我将无法在其构造函数中使用它，并且我得到了编译时错误。您是否在@NgModule上提供了它？是的。我甚至将NgModule添加到了我的帖子中。你应该将

数据服务

添加到

提供者

数组而不是

声明

通过从同级中删除它，我将无法在其构造函数中使用它，并且我得到了编译时错误。你在@NgModule上提供了它吗？是的。我甚至在我的帖子中添加了NgModule。您应该将

数据服务

添加到

提供者

数组而不是

声明