Компонент не получает обновленные данные при совместном использовании Данных между компонентами с помощью Сервиса - PullRequest
Новая
       12

Компонент не получает обновленные данные при совместном использовании Данных между компонентами с помощью Сервиса

0 голосов
/ 08 апреля 2019

Я хочу использовать переменную 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;


  }

Однако у меня точно такая же проблема с сервисом, получающим обновленное значение, третий компонент может получить это обновленное значение, но мой компонент, для которого была предназначена служба, получает значение по умолчанию.

Ответы [ 3 ]

1 голос
/ 08 апреля 2019

Попробуйте объявить службу, как показано ниже, для одного экземпляра (добавьте 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

0 голосов
/ 08 апреля 2019

Сервисный файл 

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, чтобы установить сообщение

0 голосов
/ 08 апреля 2019

Вы должны предоставлять эту Услугу в качестве синглтона на более высоком (модульном) уровне.Кажется, у вас есть два разных экземпляра этого сервиса.

...