0

据说我们可以使用 rxjs 将任何内容转换为流，这里我想将来自输入字段的数据转换为流，然后订阅它，angular2 中有使用 valueChanges 事件的方法

this.input.valueChanges.subscribe( 
   (value: string) => { console.log('sku changed to: ', value); } 
);

但是当我尝试像这样在组件类中创建流时

Observables.create().subscribe()

无法识别创建，我如何在 rxjs 中执行此操作，因为值更改为输入字段，它与 angular2 形式有关，还有什么有用的功能为此创建流

4

2 回答 2

4

Angular 2 已经有一个FormControl，它公开了一个可以订阅的 valueChanges 可观察对象。

这是一个有效的Plunker和代码：

重要的部分是：
- [FormControl]="model" （在输入元素中）
- model = new FormControl() （来自@angular/forms）

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
    selector: 'my-app',
    template: `
      Some Value: 
      <input type="text" [formControl]="model" />
      <div>{{model.value}}</div>
      <span *ngFor="let val of values">{{val}},</span>
    `
})
export class AppComponent {
  model:FormControl = new FormControl()
  values = [];
  constructor() {
    this.model.valueChanges.subscribe(s=>this.values.push(s));
  }
}

此外，在您的 AppModule 中，您需要导入ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
    imports: [
        ...
        ReactiveFormsModule
    ],
    declarations: [...],
    bootstrap: [...]
})

export class AppModule { }
于 2016-03-05T14:59:20.500 回答
0

我不确定是否理解您的问题，但您可以使用Observable该类及其创建方法创建一个原始流，如下所示：

var observable = Observable.create((observer) => {
  // Should be execute asynchronously
  observer.next('some event');
});

在 Angular2 中，valueChanges可观察对象允许启动异步处理链。您可以利用运算符flatMap来链接另一个 observable。例如，当输入值改变时执行 HTTP 请求：

var observable = this.input.valueChanges
            .flatMap((val) => {
              return this.http.get('http://...').map(res => res.map();
            });
于 2016-03-04T17:19:17.410 回答