javascript - Angular 2：可从多个事件或事件处理程序中观察到

Question

我在组件模板中对多个输入及其事件进行了分组，如下所示：

<tr (input)="onSearchObjectChange($event)">
    <th><input [(ngModel)]="searchObject.prop1"></th>
    <th><input [(ngModel)]="searchObject.prop2"></th>
    ...
</tr>

---

现在我想从 中创建一个 Observable onSearchObjectChange()，它应该得到 Promise 的结果。我将如何做到这一点，或者有更好的方法来使用 Observable？我也可以使用distinctUntilChanged()对象的功能吗？

我试图用模板变量来解决它：

<tr #search >
<th><input [(ngModel)]="searchObject.prop1"></th>
<th><input [(ngModel)]="searchObject.prop2"></th>
...
</tr>

在 ViewChild 的帮助下：

@ViewChild('search') search;

ngAfterViewInit() {
    Observable.fromEvent(this.search, 'input')
        .subscribe(() => console.log("help"));
}

但它不起作用...

Answer 1

import {Component, AfterViewInit, ViewChild, ElementRef} from '@angular/core';
import {Observable} from "rxjs";

@Component({
    selector: 'search',
    templateUrl: './search.html',
    styleUrls: ['./search.css'],
    providers: []
})
export class SearchComponent implements AfterViewInit {
@ViewChild('search') search: ElementRef;

constructor() {
}

ngAfterViewInit() {
    Observable.fromEvent(this.search.nativeElement, 'input')
        .subscribe(() => alert("It works!"))
}
}