Angular 在组件与服务共享数据时，组件未获取更新的数据

我想使用

brandName

变量从同一模块中的同级组件到另一个组件。我已经尝试使用

BehaviorSubject

但是，虽然我可以将更新后的

品牌名

发送到我的服务，但我的组件仍然使用默认消息

我的服务文件如下所示：

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

import { BehaviorSubject } from 'rxjs';


@Injectable()

export class DataService {


  private messageSource = new BehaviorSubject('default message');

  currentMessage = this.messageSource.asObservable();


  constructor() { }

  changeMessage(message: string) {

    console.log('service sent: ' + message);

    this.messageSource.next(message);

  }

}

在这里，控制台打印出更新的消息

然而，当我试图更新我的变量以订购组件时，我得到了“默认消息”

Order.component.ts：

import {DataService} from '../services/data.service';

...
export class OrderComponent implements OnInit {
...

constructor(...private data: DataService)

...

this.data.currentMessage.subscribe(message => this.brandName = message);

console.log('brandname');

console.log(this.brandName);

打印“默认消息”

只有它们的公共父级

app.module.ts

包含

DataService

提供程序

编辑

我还尝试从第三个组件获取变量，使用：

this.data.currentMessage.subscribe（message=>this.brandName=message）

在本例中，您确实获得了更新后的品牌名，但在其预期的组件中仍然没有任何内容，即使这两个组件是相同级别的兄弟

此外，我还尝试使用

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

@Injectable({
  providedIn: 'root',
})
export class DataService {

  private data: string;

  setOption(value) {

    this.data = value;
    console.log('service sent: ' + value + 'and data ' + this.data );
  }

  getOption() {
    console.log('service returned');
    console.log(this.data);
    return this.data;


  }

---

但是，我在服务获取更新值时遇到了同样的问题，第三个组件可以获取此更新值，但我的服务所针对的组件获取了默认值。

您必须在更高（模块）级别上以单例方式提供此服务。您似乎有两个不同的此服务实例。

尝试按如下方式声明此服务，使其具有一个实例（添加“根”中提供的

。

）

由于服务是异步调用的，

console.log（this.brandName）

在服务工作结束前被调用，因此我建议将日志记录

this.brandName

值移到subscribe中：

this.data.currentMessage.subscribe(message => {
 this.brandName = message;
 console.log(this.brandName); // will show the new message
});

console.log('brandname');

console.log(this.brandName); // will show the default message

我创建了一个Stackblitz应用程序，其中包含您的代码，共享服务正在运行：

服务文件

import{Observable，Subject，}来自'rxjs'；
@可注射（{providedIn:'root'}）
导出类数据服务{
//private messageSource=new BehaviorSubject（“默认消息”）；
//currentMessage=this.messageSource.asObservable（）；
private messageSource=新主题（）；
构造函数（）{}
/*changeMessage（消息：字符串）{
console.log（'已发送的服务：'+消息）；
this.messageSource.next（message）；
}*/
设置消息（消息：字符串）{
this.messageSource.next（message）；
}
getMessage（）{
返回此.messageSource.asObservable（）；
}
}

---

使用服务中的getMessage方法订阅组件中消息的更改，并使用setMessage方法设置消息

是否可以组合stackblitz显示错误的功能？我已尝试将提供的in添加到Injectable，但我仍然得到默认消息。我更改消息的组件在Order.component订阅消息之前加载，这是否意味着它无法工作？感谢您的回答Mohamed，不幸的是，我仍然从

this.data.currentMessage.subscribe（message=>{this.brandName=message；console.log（this.brandName）；//将显示新消息}）；

我已经用您代码中的更多信息编辑了我的原始帖子。我注意到您没有调用

changeMessage

方法，我创建了一个正在工作的stackblitz：

this.data.currentMessage.subscribe(message => {
 this.brandName = message;
 console.log(this.brandName); // will show the new message
});

console.log('brandname');

console.log(this.brandName); // will show the default message

import { Observable, Subject, } from 'rxjs';


@Injectable({providedIn: 'root'})

export class DataService {

  // private messageSource = new BehaviorSubject('default message');
  // currentMessage = this.messageSource.asObservable();

  private messageSource = new Subject<string>();

  constructor() { }

  /*changeMessage(message: string) {
    console.log('service sent: ' + message);
    this.messageSource.next(message);
  }*/

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

  getMessage() {
    return this.messageSource.asObservable();
  }
}