在 Angular 2 中从模型中获取可观察值

Question

我有一个输入 Angular 2 组件

<input [(ngModel)]="title"></input>

当用户更改模型时，如何获得可观察值？

Answer 1

您可以这样使用 ngModelChange 事件：

<input [(ngModel)]="title" (ngModelChange)="someMethod($event)"></input>

在示例中，更新模型时将调用 someMethod 方法。 $event 对象将包含新值。

您只能通过控件（ngControl 或 ngFormControl）获得一个可观察对象：

this.ctrl.valueChanges.subscribe(val => {
  (...)
});

如果您想将 observable 与 ngModel 结合使用，您需要自己实现它：

titleUpdated$:Subject<string> = new Subject();

someMethod(val) {
  this.titleUpdated$.next(val);
}

Answer 2

如果您出于某种原因真的不需要模型，我会建议您另一种解决方案。

我的意思是如果你不想使用模板或响应式表单，你可以在你的组件中使用类似的东西

*.html

<input (keyup)="searchTerm$.next($event.target.value);">

*.ts

............................
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

............................
export class MyComponent implements OnInit {

searchTerm$ = new Subject<string>();

............................

constructor(){}

............................

ngOnInit() {
    this.searchTerm$
      .debounceTime(400)
      .distinctUntilChanged()
      .subscribe(x => console.log(x));
}

在 Angular 2 中从模型中获取可观察值

Get observable from model in Angular 2

observable

rxjs

angular