web-dev-qa-db-ja.com

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

Angular 2.の新機能。同じレベルのコンポーネント間でイベントをブロードキャストする作業を行っています。現在、EventEmitterはイベントを上位レベルのコンポーネントに転送できることを知っています。

私はこれをチェックしました このリンク そしてobservableが私の問題を解決する方法かもしれないことを知っていますが、そのURLのサンプルは私のために働かないようです。

誰もそれをブロードキャストイベントまたは同じレベルのコンポーネントにイベントを転送する他の方法に使用する方法を知っていますか？

eventsbroadcastobservableangulareventemitter
15
Garry

購読できるメッセージを送信するサービスを作成する必要があります。 Observable fromrxjs、 EventEmitter fromnode.js、または Observable pattern に続くその他のもの。次に、依存性注入を使用して、このサービスを具体的なコンポーネントに注入する必要があります。 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 を使用します繰り返しますが、それはあなたが望むものになります

24
alexpods

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

}
13
Tomas Marik