向Angular 2中的子组件发出搜索输入值

Question

在 Angular 2 应用程序中，我有一个 HTML 搜索输入，我想将其值发送给 3 个子组件，前提是用户停止输入 300 毫秒并且他输入的内容与输入所包含的内容不同。我在网上看了一些文章，都提到了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”操作。

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

Answer 1

为什么你需要一个 observable 或 EventEmitter 呢？我认为不可能向孩子发出事件。但是你可以简单地传递一个变量。在父控制器中：

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>

现在，每次父项中的 searchValue 更改时，子项的 @Input 值 (searchFilter) 都会更新。无需在儿童身上观察任何东西，它会不断更新。