Angular4-让多个不相关的组件互相通知更新数据的问题，以及是否有一种更简洁的编码方法？

Question

I have encountered a project in progress, let multiple unrelated components notify each other of the update data, is there a cleaner coding method?

There are 3 components (more likely later) and a common-data component. They have no parent-child relationship with each other and only show on the same screen.

The desired effect is to press the button of any component, update the contents of common-data, and notify yourself and other components to fetch new messages from common-data.

At present, my approach is to use Rx's Observable and Subscription, but they must be imported in the component.ts and service.ts files of each component, and a lot of duplicate code appears, it is very messy, I don't know what is better. practice?

Thanks!

My code : The sample name is test-a-comp (abc and so on, the code is the same)

test-a-comp.html

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

test-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();
  }

}

test-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

As far as i understand & you've mentioned in the above, there is a button in one of the component (test-a-component.html). If you update the button, you need to send message to other components which are subscribed.

The Components which have no Parent-Child relationship can communicate via a service:

1. Create a single service file (In your case: test-a-comp.service)

2. Create a Subject on what data you need to communicate via this service:

     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. In your other Components, where you want to receive messages, do the following:

     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; }); } 

   For more information/guidance refer Component interaction via a common service: https://angular.io/guide/component-interaction

Hope this helps!