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

【问题标题】：Bind to @Output Observable instead of callback?绑定到@Output Observable 而不是回调？
【发布时间】：2015-12-31 16:51:01
【问题描述】：

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

我正在为我的@Output 使用 Angular 2 EventEmitter。 EventEmitter 继承自 RxJs Subject，即 Observable 和 Observer。我希望重用EventEmitter 的Observable 侧。

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

【问题讨论】：

你可以做(change)="myOutput.emit($event)"。假设我理解正确。
这样可以节省回调的样板文件（太棒了）。我仍然需要从一个主题复制到下一个主题。
你可以把你的 EventEmitter 放在一个服务中，让你的组件调用服务上的 API/方法来触发/emit() 事件，所有订阅者都会收到通知。所以没有抄袭。这是an example。
好主意，但这并不能减少样板文件，也不能与多个组件一起使用，因为服务是单例的。也许我可以解决一些问题，但这会破坏 angular api。我更喜欢 Eric 的方式，反正不会造成太多开销。
@LodewijkBogaards 您找到更好的方法了吗？没有任何样板代码或复制到不同的主题。

标签： angular rxjs

【解决方案1】：

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

阅读Observables and Reactive Programming in Angular 2后，我注意到我需要“转”一下我的架构，让父级创建Observable，然后将其分配给子级。

因此，我没有将MyComponent 与Observable<number> 类型的@Output()（然后将其初始化为new BehaviorSubject(0) 并使用对next 的调用进行修改）不同，而是将MyComponent 更改为@987654331 @ 类型为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（可能称之为值或数字）并让父级分配一个可观察对象（而不是让孩子创建一个）。

【讨论】：

【解决方案2】：

Angular 1 和 Angular 2 的核心区别之一是变更检测总是从上到下执行。这使得性能更好。也不需要像在 Angular 1 中那样执行“稳定化”（$digest 循环）。

在 Angular 2 中，除了使用 EventEmitter/Subject 发出事件之外，您不能以其他方式“推回”更改，因此 Angular 2 可以开始检查组件的更改检测器。

Here is nice关于这个话题的文章。

【讨论】：