Как обмениваться данными между компонентами в Angular 8

Question

Я пытаюсь поделиться данными из одного компонента в другой компонент, например компонент тела, в компонент заголовка, используя службу, но не работает. После того, как я нажму кнопку «Изменить данные заголовка», я хочу изменить данные данных заголовка, такие как идентификатор и имя.

body.component.ts:

  change(){ 
  this.details = {
    id:"45673",
    name:"Micheal"
  } 
  this.data.changeMessage(this.details);  
  }

common.service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class CommonService {

 details={
   id:'12345',
   name:'Victor'
 }

  private messageSource = new BehaviorSubject(this.details);
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: any) {
    this.messageSource.next(message);
  }

}

Демо: https://stackblitz.com/edit/angular-ep7tes?file=src%2Fapp%2Fbody%2Fbody.component.ts

Answer 1

Попробуйте:

 ngOnInit() {
    this.data.currentMessage.subscribe(message => {
      this.message = message
      console.log(this.message)
    })
  }

HTML:

<p>
body component:
</p>

<div *ngIf="message">


 {{message.id}}
 {{message.name}}
 </div>

https://stackblitz.com/edit/angular-xhqbti?file=src%2Fapp%2Fcommon.service.ts

Answer 2

вы меняете две строки кода и попробуйте снова

 {{names.id}} <====={{details.id}}

   {{names.name}}<====={{details.name}}

Я думаю, что это работает для вас

Answer 3

Вы можете использовать тему «Поведение» для совместного использования данных между компонентами, если ваши данные постоянно меняются и вам нужны самые свежие данные каждый раз.

В противном случае вы можете просто использовать сервис для обмена данными между компонентами.

1. https://www.c-sharpcorner.com/article/angular-services-for-sharing-data-between-component-using-angular-and-above/

2. https://medium.com/@luukgruijs / понимание-rx js -поведения субъекта-воспроизведения asyncsubject-8cc061f1cfc0