将搜索输入值发送到 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' 并订阅它以尝试获取值。）

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

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

Answer 1

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

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

在 parent 模板中：

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

children 的@Input 值 (searchFilter) 现在将在每次 parent 中的 searchValue 更改时更新。无需观察 children 中的任何内容，它会自动更新。

将搜索输入值发送到 Angular 中的子组件 2

Emit search input value to child components in Angular 2

javascript

rxjs

angular2-observables

angular