Powiąż z @Output Observable zamiast callback?

Question

Mam element suwaka, który emituje liczby podczas przeciągania suwaka, który można użyć w następujący sposób: <my-slider (change)="onSlide($event)"></my-slider>. Chciałbym pozbyć się metody onSlide i powiązać strumień zdarzeń change z właściwością Observable<number> (zamiast wywołania zwrotnego).

Używam Angular 2 EventEmitter dla mojego @Output. EventEmitter dziedziczy z RxJs Subject, który jest Observable i Observer. Chcę ponownie użyć strony Observable urządzenia EventEmitter.

Oczywiście mogę wcisnąć wartości, które przechodzą przez onSlide na inny Subject, ale chcę zapobiec temu bojlerowi i narzutowi. Czy istnieje sposób?

Answer 1

Jedną z głównych różnic między Angular 1 i Angular 2 jest to, że wykrywanie zmian jest zawsze wykonywane od góry do dołu. To znacznie poprawia wydajność. Również nie ma potrzeby, aby wykonać „stabilizację” ($ strawienia pętlę), jak to było w Kątowymi 1.

kątowej 2 Nie można „wcisnąć” zmienia się w inny sposób, z wyjątkiem emitujące wydarzenie EventEmitter/Subject, tak Angular 2 może zacząć sprawdzać detektory zmian podzespołów.

Here is nice artykuł na ten temat.

Answer 2

Nie jestem pewien, czy jest to istotne, czy też pomaga komuś: Znalazłem podobny problem: chciałem spożyć własność typu Observable<number> dostarczoną przez komponent w składniku macierzystym.

Po przeczytaniu Observables and Reactive Programming in Angular 2, zauważyłem, że trzeba „włączyć” wokół mojego architektury i niech rodzic stworzyć Observable a następnie przypisać ją do dziecka.

Więc Zamiast MyComponent z krytym @Output() typu Observable<number> (która następnie została zainicjowana do new BehaviorSubject(0) i modyfikować za pomocą połączeń do next), zmieniłem MyComponent do Haven @Input() typu 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); 
    } 
} 

The rodzic tworzy teraz obiekt BehaviorSubject i wiąże się z tą właściwością. Można go łatwo spożywać BehaviorSubject jako Obserwowalne:

@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

Więc w twoim przypadku, to powiedziałbym, że suwak powinna stanowić @Input (może nazwać to wartość lub liczba) i niech rodzic przypisać obserwowalne (zamiast pozwolić dziecku stworzyć).