Question

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

尽管我可以将更新后的brandName发送到服务中，但我的组件仍使用默认消息。

我的服务文件如下：

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组件中更新变量时，会收到“默认消息”

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;


  }

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

Answer 1

尝试声明如下所示的服务以使其具有单个实例（添加providedIn: 'root'）

@Injectable({
  providedIn: 'root',
})
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);

  }
}

由于服务是异步调用的，因此console.log(this.brandName);在服务工作结束之前被调用，因此我建议将日志记录this.brandName的值移到订阅中：

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应用程序，共享服务在其中运行：https://stackblitz.com/edit/angular-ele1cu

Answer 2

服务文件

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();
  }
}

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

Answer 3

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

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

3 个答案: