Açısal 2 olay yayını

Question

Yeni açısal 2. Aynı düzeyde bileşen arasında bir olayı yayınlamak için çalışıyorum. Şu anda EventEmitter'in bir etkinliği bir üst seviyedeki bileşene aktarabilir olduğunu biliyorum.

Bu this link numaralı telefonu denetledim ve sorunumun sorunu çözmek için bir yol olabileceğini biliyorum, ancak bu URL'deki örnek benim için işe yaramaz gibi görünüyor.

Yayın etkinliği için etkinliği (gözlemlenebilir) veya etkinliği aynı düzeydeki bileşenlere aktarmanın başka bir yolunu bilen var mı?

Answer 1

Sadece abone olabileceğiniz mesajlar gönderecek bazı servisler oluşturmanız gerekir. rxjs, EventEmitter adresinden Observable, node.js veya Observable pattern izleyen başka herhangi bir şey olabilir. Daha sonra bu hizmeti beton bileşenlere enjekte etmek için Bağımlılık Enjeksiyonu kullanmalısınız. Bkz this plunker. Bu örnekte

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 ben angular2 dan EventEmitter kullanır, ancak yine, ne istersen olabilir

Answer 2

Kullanım BehaviorSubject

Hizmeti:

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

Bileşen :

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

}