Question

服务代码：

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-parent',
      template: `{{message}}`,
      styleUrls: ['./parent.component.css'],

    })
    export class ParentComponent implements OnInit {

      message: string;

      constructor(private data: DataService) { }

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

    }

兄弟姐妹代码：

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.component.html的代码：

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

NgModule代码：

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

单击同级中的单击我按钮， Parent 和 Sibling <中的message变量< / em>必须更改为这是来自兄弟的消息。但是， Parent 不会发生这种情况，而仍然是这是 app.component.html 的默认消息。你能帮我找出问题吗？

Answer 1

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

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

providers: [DataService]

来自SiblingComponent元数据。

您的@NgModule可能如下：

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

<强> ng-run demo

另见

https://angular.io/guide/dependency-injection#ngmodule-or-component

Answer 2

您只需要从app-sibling组件中删除提供程序：[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 { }

通过共享服务进行组件通信的问题

2 个答案: