如何在 Angular 8 中的組件之間共享數據

Question

我正在嘗試使用服務將數據從一個組件共享到另一個組件，例如正文組件到標題組件，但不工作。 單擊更改標題詳細信息按鈕后，我想更改標題數據詳細信息，例如 ID 和名稱。

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

如果您的數據經常變化並且每次都需要最新數據，您可以使用 Behavior 主題在組件之間共享數據。

否則，您可以簡單地使用服務在組件之間共享數據。

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

2. https://medium.com/@luukgruijs/understanding-rxjs-behaviorsubject-replaysubject-and-asyncsubject-8cc061f1cfc0