Angular4-讓多個不相關的組件互相通知更新數據的問題，以及是否有一種更簡潔的編碼方法？

Question

我遇到了一個正在進行的項目，讓多個不相關的組件將更新數據相互通知，是否有一種更簡潔的編碼方法？

有3個組件（以后可能會使用）和一個公共數據組件。 他們彼此之間沒有親子關系，只顯示在同一屏幕上。

所需的效果是按下任何組件的按鈕，更新公共數據的內容，並通知自己和其他組件從公共數據中獲取新消息。

目前，我的方法是使用Rx的Observable和Subscription，但是必須將它們導入每個組件的component.ts和service.ts文件中，並且出現很多重復的代碼，這很混亂，我不知道什么是更好的。 實踐？

謝謝！

我的代碼：樣本名稱為test-a-comp（abc等，代碼相同）

測試-A-comp.html

<p>
{{ownMessage}}
</p>
<button (click)="sendChange()">update</button>

測試-A-comp.component

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { CommonData } from '../common-data/common-data';
import { TestACompService } from './test-a-comp.service';
import { TestBCompService } from '../test-b-comp/test-b-comp.service';
import { TestCCompService } from '../test-c-comp/test-c-comp.service';

@Component({
  selector: 'app-test-a-comp',
  templateUrl: './test-a-comp.component.html',
  styleUrls: ['./test-a-comp.component.css']
})
export class TestACompComponent implements OnInit {

  subscription: Subscription;
  ownMessage;

  constructor(
    private testAService: TestACompService,
    private testBService: TestBCompService,
    private testCService: TestCCompService,
  ) {
    this.subscription = this.testAService.getMessage()
      .subscribe((test) => {
        CommonData.message = test;
      });
    this.subscription = this.testBService.getMessage()
      .subscribe(() => {
        this.ownMessage = CommonData.message;
      });
    this.subscription = this.testCService.getMessage()
      .subscribe(() => {
        this.ownMessage = CommonData.message;
      });
  }

  ngOnInit() {
  }

  sendChange() {
    this.testAService.sendMessage();
  }

}

測試-A-comp.service：

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
import {Subscription} from 'rxjs/Subscription';

@Injectable()
export class TestACompService {
  subscription: Subscription;

  private subject = new Subject<any>();

  constructor() {
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }

  sendMessage(): void {
    this.subject.next('update message from A');
  }

}

Answer 1

據我了解，您在上面提到的一個組件（test-a-component.html）中有一個按鈕。 如果更新按鈕，則需要將消息發送到其他已訂閱的組件。

沒有父子關系的組件可以通過服務進行通信：

1. 創建一個服務文件（在您的情況下：test-a-comp.service）

2. 創建您需要通過此服務傳達哪些數據的主題：

     export class testMessageService { constructor() {} // Observable string sources private message = new Subject<string>(); //Observable string streams testMessage$ = this.message.asObservable(); constructor() {} // Method to send message when a button is clicked sendMessage(message: string) { this.message.next(message); } /* You don't need "getMessage()" method as you've already subscribed to the observables. There subscribed Observable string streams are injected in your components (As below point 3) to display / do other operation on the message. */ } 

3. 在要接收消息的其他組件中，執行以下操作：

     export class TestComponent 1 { myMessage1: string; constructor(private TestMessageService: testMessageService) {} TestMessageService.testMessage$.subscribe(message => { this.myMessage1 = message; }); } export class TestComponent 2 { myMessage2: string; constructor(private TestMessageService: testMessageService) {} TestMessageService.testMessage$.subscribe(message => { this.myMessage2 = message; }); } export class TestComponent 3 { myMessage3: string; constructor(private TestMessageService: testMessageService) {} TestMessageService.testMessage$.subscribe(message => { this.myMessage3 = message; }); } 

   有關更多信息/指導，請參見通過公共服務進行組件交互： https : //angular.io/guide/component-interaction

希望這可以幫助！