Connetti a @Output Observable invece di callback?

Question

Ho un componente di scorrimento che emette numeri mentre si trascina il cursore, che è utilizzabile in questo modo: <my-slider (change)="onSlide($event)"></my-slider>. Mi piacerebbe sbarazzarsi del metodo onSlide e associare invece il flusso di eventi change a una proprietà Observable<number> (anziché una richiamata).

Sto utilizzando un Angular 2 EventEmitter per il mio @Output. EventEmitter eredita da un RxJs Subject, che è un Observable e un Observer. Desidero riutilizzare il lato Observable dello EventEmitter.

Ovviamente posso inviare valori che entrano attraverso onSlide su un altro Subject, ma desidero evitare questo standard e overhead. C'è un modo?

Answer 1

Una delle differenze principali tra Angolare 1 e Angolare 2 è che il rilevamento delle modifiche viene sempre eseguito dall'alto verso il basso. Ciò rende le prestazioni molto migliori. Inoltre non v'è alcuna necessità di eseguire "stabilizzazione" ($ digerire loop) come lo era nel angolare 1.

In angolare 2 non si può "spingere" cambia di nuovo in altro modo, ad eccezione che emette evento con EventEmitter/Subject, quindi Angular 2 può iniziare a controllare i rilevatori di modifiche del componente.

Here is nice articolo su questo argomento.

Answer 2

Non sono sicuro se pertinente o se aiuta qualcuno: mi sono imbattuto in un problema simile: volevo utilizzare una proprietà di tipo Observable<number> fornita da un componente nel componente principale.

Dopo aver letto Observables and Reactive Programming in Angular 2, ho notato che ho bisogno di "girare" intorno alla mia architettura e lasciare che il genitore crei il Observable e quindi assegnarlo al figlio.

Così, invece di avere un MyComponent con @Output() di tipo Observable<number> (che è stato poi inizializzato a new BehaviorSubject(0) e modificato utilizzando chiamate a next), ho cambiato MyComponent di rifugio un @Input() di tipo BehaviorSubject<number>:

@Component({ 
    selector: 'my-component', 
    template: ` 
    <button (click)="increment()">Click me!</button> 
    `, 
}) 
export class MyComponent { 
    private _count : number = 0; 

    @Input() 
    public counter : BehaviorSubject<number>; 

    public increment() { 
    this._count++; 

    if (this.counter) 
     this.counter.next(this._count); 
    } 
} 

L' genitore ora crea un oggetto BehaviorSubject e si lega alla proprietà. Si può facilmente consumare il BehaviorSubject come osservabile:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <my-component [counter]="count"></my-component> 
    <span>{{text | async}}</span> 
    `, 
}) 
export class App { 
    public text : Observable<string>; 

    public count : BehaviorSubject<number> = new BehaviorSubject(0); 

    constructor() { 
    this.text = this.count.map(n => "Click: " + n); 
    } 
} 

Plunker: https://plnkr.co/edit/rKtVWmmGnFn4Po4B4CCL?p=preview

Quindi nel tuo caso, vorrei dire che il vostro cursore dovrebbe fornire un @Input (forse lo chiamano valore o numero) e lasciare che il il genitore assegna un osservabile (invece di lasciare che il bambino ne crei uno).