@Output Bağlama Geri arama yerine gözlenebilir mi?

Question

Kaydırıcıyı sürüklerken sayıları yayan bir kaydırma bileşenim var, bu da şu şekilde kullanılabilir: <my-slider (change)="onSlide($event)"></my-slider>. onSlide yönteminden kurtulmak ve bunun yerine change olay akışını Observable<number> özelliğine (geri arama yerine) bağlamak istiyorum.

@Output sayfam için Angular 2 EventEmitter kullanıyorum. EventEmitter, bir Observable ve bir Observer olan bir RxJs Subject'dan miras alır. EventEmitter'un Observable tarafını yeniden kullanmak isterim.

Tabii ki onSlide'dan başka bir Subject'a giren değerleri itmeyi başarabilirim, fakat bu kazan levhası ve ek yükü önlemek istiyorum. Bir yolu var mı?

Answer 1

Açısal 1 ve Açısal 2 arasındaki temel farklardan biri, değişiklik algılamanın her zaman yukarıdan aşağıya doğru gerçekleştirilmesidir. Bu performansı daha iyi yapar. Ayrıca, Açısal 1'de olduğu gibi "stabilizasyon" ($ digest loop) gerçekleştirmeye gerek yoktur.

Köşeli 2'de EventEmitter/Subject ile yayma olayı dışında başka şekilde geri dönüşü "itemezsiniz", Yani Açısal 2, bileşenin Değişim Dedektörlerini kontrol etmeye başlayabilir. Bu konuyla ilgili makalede,

Here is nice makalesi.

Answer 2

İlgili olup olmadığından emin değilseniz veya birisine yardımcı olursa: Benzer bir sorunla karşılaştım: Ana bileşendeki bir bileşen tarafından sağlanan Observable<number> türünde bir özellik kullanmak istedim.

Observables and Reactive Programming in Angular 2'u okuduktan sonra, mimarimin etrafında "dönmem" gerektiğini ve üst öğenin Observable oluşturup sonra çocuğa atamasını sağladığımı fark ettim.

Bunun yerine, bir sığınak için MyComponent değiştirildi tip Observable<number> bir @Output() bir MyComponent olan (o new BehaviorSubject(0) başlatıldı ve modifiye next çağrı kullanılarak) tipi BehaviorSubject<number> bir @Input():

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

The Ebeveyn artık bir BehaviorSubject oluşturur ve mülke bağlanır. senin durumunda Yani

https://plnkr.co/edit/rKtVWmmGnFn4Po4B4CCL?p=preview, senin kaydırıcı bir @Input (belki değer veya numara diyoruz) sağlamalıdır söyleyebilirim ve let:

@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: Kolayca bir gözlemlenebilir olarak BehaviorSubject tüketebilir Ebeveyn gözlenebilir bir atamak (çocuğun bir tane oluşturmasına izin vermek yerine).