コールバックではなく@Output Observableにバインドしますか？

Question

私は、スライダーをドラッグしている間に番号を出すスライダーコンポーネントを持っています。これは、次のように使用できます：<my-slider (change)="onSlide($event)"></my-slider>。私はonSlideメソッドを取り除き、代わりにchangeイベントストリームを（コールバックの代わりに）Observable<number>プロパティにバインドしたいと思います。

私は@Outputに角2 EventEmitterを使用しています。 EventEmitterは、ObservableおよびObserverであるRxJsSubjectを継承しています。私はEventEmitterのObservable側を再利用したいと思います。

onSlideから入力した値を別のSubjectにプッシュできますが、この定型文とオーバーヘッドを防止したいと考えています。方法はありますか？

Answer 1

角度1と角度2のコアの違いの1つは、常に変化の検出が上から下に行われることです。これにより、パフォーマンスが大幅に向上します。

角2では、EventEmitter/Subjectでイベントを放つ以外は、別の方法で変更を元に戻すことはできません。これは、「安定化」（$ダイジェストループ）を実行する必要はありません。 Angular 2はコンポーネントのChange Detectorのチェックを開始できます。

Here is niceこのトピックについて

Answer 2

関連性があるか、それが誰かを助けるかわからない場合：同様の問題が発生しました。親コンポーネントのコンポーネントによって提供されるタイプObservable<number>のプロパティを消費したかったのです。

Observables and Reactive Programming in Angular 2を読んだ後、自分のアーキテクチャを "回し"親がObservableを作成してそれを子に割り当てさせる必要があることに気付きました。

だから代わりに（その後、new BehaviorSubject(0)に初期化nextへの呼び出しを使用して変更した）タイプObservable<number>の@Output()とMyComponentを有することが、私は避難所にタイプBehaviorSubject<number>の@Input()をMyComponentを変更：

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

parentはBehaviorSubjectを作成し、プロパティにバインドするようになりました。あなたのケースではそう

https://plnkr.co/edit/rKtVWmmGnFn4Po4B4CCL?p=preview、私はあなたのスライダが@Input（多分それは値または数を呼び出す）を提供するべきであると言うとしましょう：

@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を：それは容易に観察としてBehaviorSubjectを消費することができますparentはobservableを割り当てます（子に子を作成させるのではなく）。