Angular 2 Event Broadcast

Question

Neu bei Angular 2. Ich arbeite an der Übertragung eines Ereignisses zwischen der gleichen Ebene Komponente. Momentan weiß ich, dass EventEmitter ein Ereignis nur auf die höhere Komponente übertragen kann.

Ich habe dies überprüft this link und wissen observable kann eine Möglichkeit sein, mein Problem zu lösen, aber die Probe in dieser URL scheint nicht für mich arbeiten.

Kann jemand es (beobachtbar) für Broadcast-Ereignis oder eine andere Möglichkeit verwenden, Ereignis auf Komponenten gleicher Ebene zu übertragen?

Answer 1

Sie müssen nur einen Dienst erstellen, der Nachrichten ausgibt, auf denen Sie abonnieren können. Es kann sein Observable von rxjs, EventEmitter von node.js, oder alles andere, was folgt Observable pattern. Dann sollten Sie Dependency Injection verwenden, um diesen Service in konkrete Komponenten zu injizieren. Siehe 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 In diesem Beispiel verwende ich EventEmitter von angular2, aber auch hier kann es sein, was auch immer Sie

Answer 2

Verwenden BehaviorSubject wollen

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

Component :

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

}