web-dev-qa-db-fra.com

Angular 2 diffusion d'événements

Nouveau sur Angular 2. Je travaille sur la diffusion d'un événement entre un composant de même niveau. Actuellement, je sais qu'EventEmitter peut simplement transférer un événement vers un composant de niveau supérieur.

J'ai vérifié cela ce lien et je sais que l'observable peut être un moyen de résoudre mon problème, mais l'exemple dans cette URL ne semble pas fonctionner pour moi.

Quelqu'un sait-il comment l'utiliser (observable) pour un événement diffusé ou d'une autre manière pour transférer un événement vers des composants de même niveau?

eventsbroadcastobservableangulareventemitter
15
Garry

Il vous suffit de créer un service qui émettra des messages auxquels vous pourrez vous abonner. Cela peut être Observable from rxjs , EventEmitter de node.js , ou toute autre chose qui suit modèle observable . Ensuite, vous devez utiliser l'injection de dépendance pour injecter ce service dans des composants en béton. Voir ce 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 [~ # ~] Dans cet exemple, j'utilise EventEmitter de angular2, mais encore une fois, ça peut être ce que vous voulez

24
alexpods

Utilisez BehaviorSubject

Un service:

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

Composant:

@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