相互依賴的組件，它需要相互溝通

我的情況怎麼樣，我有哪些需要相互溝通相互依存的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」，我的要求是它應同時觸發聽者。請幫我重構代碼。打擊是我的服務，我正在使用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); 
    } 
}

來源

2017-10-06 Webber

這是Angular（2+）還是AngularJS（1.x）？你的意思是相關組件（父主機組件選擇器DOM）還是不相關（沒有父主機選擇器DOM）？您是否瀏覽了基本組件交互頁面https://angular.io/guide/component-interaction？ –

你可以做到這一點使用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主題和聽任何按鈕的點擊事件你已經訂閱該按鈕主題在你要聽那個按鈕事件等組成。

希望這會引導你在正確的方向。

來源

2017-10-07 04:41:45 asmmahmud

我已經厭倦了這一點，但沒有達到我的要求下面我把我的代碼片段基於你的回答 – Webber

感謝您的幫助，更新我的問題與代碼片段請看看，如果可能的話還原。 – Webber

你必須爲不同的按鈕點擊偵聽器使用不同的主題。你正在使用相同的主題。 – asmmahmud

你應該使用共享服務與BehaviorSubject發射到上市給它的任何組件的任何更改，請在我的答案Here我張貼像幾秒鐘前的一個類似的問題，一起來看看。

來源

2017-10-06 21:53:41

相互依賴的組件，它需要相互溝通

回答

相關問題