从Angular 2中的模型中观察

Question

我在Angular 2组件中有一个输入

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

如何在用户更改模型时获得可观察信息？

Answer 1

你可以这样使用这个ngModelChange事件:

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

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

你只能通过控件(ngControl或ngFormControl)来获得一个observable :

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

如果你想利用ngModel的observable,你需要实现它是你自己的:

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