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

我有一个滑块组件，当你拖动滑块时，它会发出数字，可以这样使用：

。我想去掉

onSlide

方法，而是将

change

事件流绑定到

Observable

属性（而不是回调）

我将角度2

EventEmitter

用于我的

@输出

EventEmitter

继承自RxJs

Subject

，它是一个

可观察的

和一个

观察者

。我希望重用

EventEmitter

的

Observable

端

---

当然，我可以将通过滑入的

onSlide

输入的值推送到另一个

主题上，但我希望避免这种样板和开销。有办法吗？
Angular 1和Angular 2之间的核心区别之一是变化检测总是从上到下执行。这使得性能更好。此外，不需要像在Angular 1中那样执行“稳定”（$digest loop）

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

关于此主题的文章。
不确定是否相关或是否对某人有帮助：我遇到了类似的问题：我想使用父组件中的组件提供的
可观察
类型的属性

阅读之后，我注意到我需要“扭转”我的架构，让父级创建可观察的
，然后将其分配给子级

因此，我将
MyComponent
更改为
行为主体
类型的
@Input（）
（然后将其初始化为
新行为主体（0）
，并使用调用
next
进行修改），而不是将
MyComponent
更改为包含
@Input（）
，类型为
行为主体
：

@组件({
选择器：“我的组件”，
模板：`
点击我！
`,
})
导出类MyComponent{
私有_计数：数字=0；
@输入（）
公共计数器：行为主体；
公共增量（）{
这个._count++；
如果（此计数器）
这个.计数器.下一个（这个._计数）；
}
}

父对象现在创建一个BehaviorSubject并绑定到属性。它可以很容易地将行为主体视为可观察对象：

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

@组件({
选择器：“我的应用程序”，
模板：`
{{text}异步}
`,
})
导出类应用程序{
公共文本：可见；
公共计数：BehaviorSubject=新的BehaviorSubject（0）；
构造函数（）{
this.text=this.count.map（n=>“单击：”+n）；
}
}

普朗克：

因此，在您的情况下，我会说您的滑块应该提供一个
@输入（可能称之为值或数字），并让父对象分配一个可观察对象（而不是让子对象创建一个）。
您可以执行
（更改）=“myOutput.emit（$event）”
。假设我对你的理解是正确的，那就省去了回拨的样板（太好了）。我仍然需要从一个主题复制到下一个主题。您可以将EventEmitter放入服务中，让组件调用服务上的API/方法来触发/
emit（）。所以不要复制。好主意，但这不会减少样板文件，也不会处理多个组件，因为服务是单例的。也许我可以解决一些问题，但这会打破角度api。我更喜欢埃里克的方式，这不会造成太多开销。@LodewijkBogaards你找到更好的方式了吗？没有任何样板代码或不同主题的副本。
@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);
  }
}