Служба обмена данными с дублированным компонентом - PullRequest
Новая
       7

Служба обмена данными с дублированным компонентом

0 голосов
/ 07 мая 2019

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

Вот мой компонент 

export class HelloComponent  {
   message:string;
   printedMessage:string

  constructor(private data: DataService, private router : Router) { }

  ngOnInit() {
    this.message = this.data.messageSource.value;
  }

  updateService(){
    this.data.changeMessage(this.message);
    this.printedMessage=this.data.messageSource.value
    //this.data.currentMessage.subscribe(message => this.message = message)
  }

  navigateToSibling(){
    this.router.navigate(['/sibling']);
  }
}

служба данных 

export class DataService {

  messageSource = new BehaviorSubject<string>("default message");
  constructor() { }

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

родительский компонент 

<hello></hello>
<hello></hello>

Вот демоверсия stackblitz

Я хотел бы, чтобы при внесении изменений в компонент 1дублированный компонент получит и это изменение.(когда я нажимаю «Сохранить», я запускаю функцию save() на обоих компонентах, см. здесь )

На самом деле, когда я изменяю вход в первом компоненте, он печатается только вэтот компонент отсутствует в дубликате.

Использует ли компонент разностный экземпляр общего data.service?если да, то как их сделать одинаково?

1 Ответ

1 голос
/ 07 мая 2019

Вам необходимо подписаться на наблюдаемую службу данных внутри потребляющего HelloComponent. 

ngOnInit() {
    this.message = this.data.messageSource.value;
    this.data.messageSource.subscribe(message => this.printedMessage = message); // Subscribing to changes here
}
...