angular - 绑定(bind)到@Output Observable 而不是回调？

Question

我有一个 slider 组件，它会在您拖动 slider 时发出数字，它可以像这样使用:<my-slider (change)="onSlide($event)"></my-slider> .我想摆脱 onSlide方法，而是绑定(bind) change事件流到 Observable<number>属性(而不是回调)。

我正在使用 Angular 2 EventEmitter对于我的 @Output . EventEmitter继承自 RxJs Subject ，这是一个 Observable和一个 Observer .我希望重复使用 Observable EventEmitter 的一侧.

当然我可以推送通过 onSlide 输入的值到另一个Subject ，但我希望防止这种样板和开销。有办法吗？

Answer 1

不确定是否相关或是否对某人有帮助:我遇到了类似的问题:我想使用 Observable<number> 类型的属性由父组件中的组件提供。

看完Observables and Reactive Programming in Angular 2 ，我注意到我需要“转向”我的架构并让父级创建 Observable然后分配给 child 。

所以不用 MyComponent用@Output()类型 Observable<number> (然后初始化为 new BehaviorSubject(0) 并使用对 next 的调用进行修改)，我更改了 MyComponent避风港 @Input()类型 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);
  }
}

父级现在创建一个 BehaviorSubject 并绑定(bind)到该属性。它可以轻松地将 BehaviorSubject 作为 Observable 使用:

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

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

所以在你的情况下，我会说你的 slider 应该提供一个 @Input (也许称之为值或数字)并让 parent 分配一个可观察对象(而不是让 child 创建一个)。