Angular 2イベントブロードキャスト

Question

Angular 2. New to私は同じレベルのコンポーネントの間でイベントを放送しています。現在、私はEventEmitterが上位レベルのコンポーネントにイベントを転送できることを知っています。

私はこれをチェックしましたthis link私の問題を解決する方法が観察可能かもしれないことは知っていますが、そのURLのサンプルは私にとってはうまくいかないようです。

ブロードキャストイベントや他の方法でイベントを同じレベルのコンポーネントに転送する方法を知っている人はいますか？

Answer 1

登録できるメッセージを送信するサービスを作成するだけで済みます。 Observableからrxjs,EventEmitternode.jsまたはそれに続くObservable patternのいずれかにすることができます。次に、Dependency Injectionを使用して、このサービスを具体的なコンポーネントに注入する必要があります。 this plunkerを参照してください。

class Broadcaster extends EventEmitter {} 

@Component({ 
    selector: 'comp1', 
    template: '<div>Generated number: {{ generatedNumber }}</div>', 
}) 
class Comp1 { 
    generatedNumber: number = 0; 

    constructor(broadcaster: Broadcaster) { 
    setInterval(() => { 
     broadcaster.next(this.generatedNumber = Math.random()); 
    },1000); 
    } 
} 

@Component({ 
    selector: 'comp2', 
    template: '<div>Received number: {{ receivedNumber }}</div>', 
}) 
class Comp2 { 
    receivedNumber: number = 0; 

    constructor(broadcaster: Broadcaster) { 
    broadcaster.observer({ 
     next: generatedNumber => this.receivedNumber = generatedNumber 
    }); 
    } 
} 

@Component({ 
    selector: 'app', 
    viewProviders: [Broadcaster], 
    directives: [Comp1, Comp2], 
    template: ` 
    <comp1></comp1> 
    <comp2></comp2> 
    ` 
}) 
export class App {} 

PSこの例では、私はangular2からEventEmitterを使用していますが、再び、それはあなたが望むものは何でもすることができ

Answer 2

使用BehaviorSubject

サービス：

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

@Injectable() 
export class MyService { 

    public mySubject: BehaviorSubject<number> = new BehaviorSubject<number>(0); 


    public doSomething(): void { 
     let myValue: number = 123; 
     this.mySubject.next(myValue); 
    } 
} 

コンポーネント：

@Component({ 
    selector: 'app-my-component', 
    templateUrl: './my-component.component.html', 
    styleUrls: ['./my-component.component.css'] 
}) 
export class MyComponent { 

    constructor(private myService: MyService) { 
     this.myService.mySubject.subscribe(
      value => { 
       console.log(value); 
      } 
     ); 
    } 

}