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 => {
  (...)
});

如果你想利用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));
}

从Angular 2中的模型中观察

2 个答案: