javascript - 向 Angular 2 中的子组件发送搜索输入值

Question

在 Angular 2 应用程序中，我有一个 HTML 搜索输入，我想将其值发送到 3 个子组件，前提是用户停止输入 300 毫秒并且他输入的内容与输入包含的内容不同。我在 Internet 上阅读了一些文章，它们都提到了 Subject、debounceTime 和 distinctUntilChanged 运算符的使用。按照其中一个教程，我得到了以下代码:

父组件:

// Subject to emit an observable
public searchUpdated: Subject <string> = new Subject<string>();

@Output() searchChangeEmitter: EventEmitter <any> = new EventEmitter <any>();

constructor() {
  [.......]
  this.searchChangeEmitter = <any>this.searchUpdated.asObservable()
    .debounceTime(300)
    .distinctUntilChanged(); // accept only relevant chars
}

onSearchType(value : string) {
  this.searchUpdated.next(value); // Emit the changed value to the subscribers
}

父模板:

<input class="input-group-field" type="search" id="inputSearch" name="inputSearch" (keyup)="onSearchType($event.target.value)">

我想将发出的值传递给子组件，但我感觉有点迷茫。我已经试过了，但没用:

父模板

<app-object-tree [searchFilter]="searchChangeEmitter"></app-object-tree>

(并且，在子组件 'app-object-tree' 中，创建 @Input 'searchFilter' 并订阅它以尝试获取值。)

创建服务、在父组件中提供服务并在子组件上订阅服务对我来说更有意义，但我不知道在应用“debounceTime”后如何调用服务“setter”函数和“distinctUntilChanged”操作。

非常感谢，很抱歉，如果我没有正确解释自己，我仍在努力将所有 Subject/Observable 概念联系起来。

Answer 1

为什么为此需要一个 observable 或 EventEmitter？我认为不可能向 child 发出事件。但是您可以简单地传递一个变量。在父 Controller 中:

searchValue: string;
private _searchSubject: Subject<string> = new Subject();

constructor() {
  [.......]
  this._searchSubject
    .debounceTime(200)
    .distinctUntilChanged()
    .subscribe(result => {
      this.searchValue = result;
    });
}

onSearchType(value : string) {
  this._searchSubject.next(value);
}

在父模板中:

<input class="input-group-field" type="search" id="inputSearch" name="inputSearch" (keyup)="onSearchType($event.target.value)">
<app-object-tree [searchFilter]="searchValue"></app-object-tree>

子项的@Input 值(searchFilter)现在将在每次父项中的searchValue 更改时更新。不需要观察 child 的任何东西，它会得到更新。