Question

我处在一种情况，就像我有5个相互依赖的组件需要相互通信。例如，如果我点击所有其他4个组件上的按钮A，则需要收听点击并提醒某些内容。同样的方式其他组件中的按钮也被其他所有组件4听取。需要一个如何实现这一目标的最佳解决方案。

这是我的代码段

import { Component, OnInit } from '@angular/core';
import { CommonService } from 'broadcast-recive/service/common-service';

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

  constructor(private commonservice: CommonService) { }

  ngOnInit() {
  }

  broadCastMe(): void
  {
    this.commonservice.btnClickedInBroadCasterComponent((<HTMLButtonElement>event.target).id);
  }

}

import { Component, OnInit } from '@angular/core';
import { CommonService } from 'broadcast-recive/service/common-service';

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

  constructor(private commonservice: CommonService) { }

  ngOnInit() {
    this.commonservice.clickStatusForBroadCastercomponentBtn.subscribe((id: string) => {
      alert('alert from listner 1');
    })
  }

}

import { Component, OnInit } from '@angular/core';
import { CommonService } from 'broadcast-recive/service/common-service';

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

  constructor(private commonservice: CommonService) { }

  ngOnInit() {
    this.commonservice.clickStatusForBroadCastercomponentBtn.subscribe((id: string) => {
      alert('from listner 2');
    });
  }

}

这里总是收到来自听众2＆＃34;的警报框。，我的要求是它应该触发两个听众。请帮我重构一下代码。打击是我的服务，我使用rx js订阅。

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

@Injectable()
export class CommonService {

  public clickStatusForBroadCastercomponentBtn = new Subject<string>();
  public clickStatusForBcomponentBtn = new Subject<string>();

  btnClickedInBroadCasterComponent(btnId: string): void {
    this.clickStatusForBroadCastercomponentBtn.next(btnId);
  }
  btnClickedInComponentB(btnId: string): void {
    this.clickStatusForBcomponentBtn.next(btnId);
  }
}

Answer 1

您可以使用服务中声明的rxjs Subject执行此操作。可以说，您有一个名为AService的服务：

import {BehaviorSubject} from 'rxjs/BehaviorSubject;

@Injectable()
export class AService {

  public clickStatusForAcomponentBtn = new BehaviorSubject<string>('');
  public clickStatusForBcomponentBtn = new BehaviorSubject<string>('');

  btnClickedInComponentA(btnId: string): void {
    this.clickStatusForAcomponentBtn.next(btnId);
  }
  btnClickedInComponentB(btnId: string): void {
    this.clickStatusForAcomponentBtn.next(btnId);
  }
}

现在，您可以在需要彼此通信的所有组件中使用此服务，如下所示：

 export class AComponent implement OnInit {
     constructor(private aService: AService){}
     ngOnInit(){
        this.aService.clickStatusForBcomponentBtn .subscribe((clickedBtnId:string)=> {
           // whenever button with id clickedBtnId clicked in Component B this observer 
           // will be get executed.So, do your necessary operation here.
        }
     }
     btnClickListenerForA(event:Event){ /* in this component template you'll bind this listener with your button click event */
        this.aService.btnClickedInComponentA((<HTMLButtonElement>event.target).id);
     }
 }

 export class BComponent implement OnInit {
     constructor(private aService: AService){}
     ngOnInit(){
        this.aService.clickStatusForAcomponentBtn .subscribe((clickedBtnId:string)=> {
           // whenever button with id clickedBtnId clicked  in Component A this observer 
           // will be get executed.So, do your necessary operation here.
        }
     }
     btnClickListenerForB(event:Event){ /* in this component template you'll bind this listener with your button click event */
        this.aService.btnClickedInComponentB((<HTMLButtonElement>event.target).id);
     }
 }

如果您查看代码，您将了解两个主题用于传递两个组件之间的通信。这样，您就可以在任意数量的组件之间进行通信。

因此，您可以为每个按钮声明一个rxjs主题，并且可以听取任何按钮的点击事件，您可以在其他组件中订阅您想要收听按钮事件的按钮。

希望这会引导你朝着正确的方向前进。

Answer 2

您应该使用BehaviorSubject的共享服务向其发布任何组件列表的任何更改，请查看我的回答 Here 我将其发布为几秒钟之前就类似的问题。

需要相互通信的相互依赖的组件

2 个答案: