Angular 2 трансляции событий

Новое в Angular 2. Я работаю над трансляцией события между тем же компонентом уровня. В настоящее время я знаю, что EventEmitter просто может передать событие компоненту верхнего уровня.

Я проверил эту эту ссылку и знаю, что наблюдаемый может быть способом решить мою проблему, но образец в этом URL-адресе, похоже, не работает для меня.

Кто-нибудь знает, как его использовать (наблюдаемый) для вещательного события или каким-либо другим способом передачи событий на компоненты того же уровня?

Ответ 1

Вам просто нужно создать некоторую услугу, которая будет генерировать сообщения, на которых вы можете подписаться. Это может быть Observable от rxjs, EventEmitter от node.js или что-либо еще, что следует за Наблюдаемым шаблоном. Затем вы должны использовать Dependency Injection для инъекции этой услуги в конкретные компоненты. См. этот плункер.

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 В этом примере я использую EventEmitter из angular2, но опять же, это может быть то, что вы хотите

Ответ 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); 
             }
        );
   }

}