Question

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

我正在为EventEmitter使用Angular 2 @Output。 EventEmitter继承自RxJ Subject，即Observable和Observer。我希望重用Observable的{{1}}方。

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

Answer 1

Angular 1和Angular 2之间的核心差异之一是变化检测始终从上到下执行。这使得性能更好。此外，没有必要执行＆＃34;稳定＆＃34; （$ digest循环）就像在Angular 1中一样。

在Angular 2中，您无法推动＆＃34;以其他方式更改，除了使用EventEmitter / Subject发出事件，因此Angular 2可以开始检查组件的更改检测器。

Here is nice有关此主题的文章。

Answer 2

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

在阅读Observables and Reactive Programming in Angular 2之后，我注意到我需要＆＃34;转向＆＃34;在我的架构周围，让父母创建Observable，然后将其分配给孩子。

所以不要使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并绑定到该属性。它可以轻松地将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);
  }
}

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

所以在你的情况下，我会说你的滑块应该提供一个@Input（可能称之为值或数字）并让父母指定一个可观察的（而不是让孩子创建一个）。

绑定到@Output Observable而不是回调？

2 个答案: