Question

在Angular 2应用程序中，我有一个HTML搜索输入，其值我想发送给3个子组件，只有当用户停止键入300毫秒并输入与包含的输入不同的内容时。我在互联网上阅读了一些文章，他们都提到了使用Subject，debounceTime和distinctUntilChanged运营商的问题。按照其中一个教程，我最终得到了以下代码：

PARENT COMPONENT：

// 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>

（并且，在子组件＆＃39; app-object-tree＆＃39;中，创建@Input＆＃39; searchFilter＆＃39;并订阅它以尝试获取该值。）

创建服务，在父组件中提供服务以及在子组件上订阅服务对我来说更有意义，但我不知道如何调用服务＆＃39; setter＆＃39;应用＆＃39; debounceTime＆＃39; && 39; distinctUntilChanged＆＃39;操作

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

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>

每次父级searchFilter更改时，子级的@Input值（searchValue）都会更新。没有必要在孩子身上观察任何东西，它只会得到更新。

在Angular 2

1 个答案: