angular监听输入框值的变化_[Angular 组件库 NG-ZORRO 基础入门]

本文介绍了如何在Angular应用中使用NG-ZORRO组件库的Input和Autocomplete组件，通过ngModel监听输入框值的变化，并使用debounceTime和takeUntil操作符优化实时查询。此外，还展示了如何实现自动补全功能，提供搜索建议。最后，预告将深入探讨组件定制化、主题、国际化和社区贡献等内容。

前言回顾

我们到目前为止已经完成了 hacker news 的大部分功能，今天我们将剩下的查询功能继续写完。

查询模块

Input 组件

我们可以直接使用 Input 作为搜索框，在此之前，我们在 待办事项 示例中已经接触过搜索框组件了，今天我们会继续使用 nz-input 来实现一个搜索框。

在此之前我们先准备好搜索对象，为了能监控每次输入的值，我们采用 FormControl 来监听 input 值变化：

<nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
  <input type="text" nz-input placeholder="Search stories by title, url or author" [formControl]="searchControl" />
</nz-input-group>
<ng-template #prefixTemplate>
  <i nz-icon nzType="search"></i>
</ng-template>
<ng-template #suffixTemplate>
  <i
     nz-icon
     class="ant-input-clear-icon"
     nzType="close-circle"
     *ngIf="queryString"
     (click)="searchControl.reset()"></i>
</ng-template>

监听事件也很容易实现，我们只需要订阅 FormControl 的 valueChanges：

export class HackerNewsComponent implements OnInit, OnDestroy {
  // search value
  queryString = '';
  searchControl = new FormControl();
  destroy$ = new Subject();

  ngOnInit() {
    this.searchControl.valueChanges.pipe(
      debounceTime(300),
      takeUntil(this.destroy$)
    ).subscribe(query => {
      // set query value
      this.queryString = query || '';
      // refresh story list
      this.getStories();
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

大家看到我们在订阅 valueChanges 时增加了两个 Rxjs 操作符： debounceTime：舍弃掉在两次输出之间小于指定时间的发出值，这可以让我们不必每次输入都去请求后端，直到用户的连续输入停止，我们才去刷新，减轻 API 的压力 takeUntil：销毁时取消订阅事件

这也是为什么我们不用 [ngModel] 的原因，我们使用 FormControl 可以更方便地调整查询刷新的时机。

Autocomplete 组件

当然，我们还可以结合 Autocomplete 给用户提供预选项，这个功能对于搜索非常有用，比如热门搜索、自动补全等等情况。

Autocomplete 的使用方式也十分简单，只需要在 input 元素上设置 nzAutocomplete 指令指向一个 nz-autocomplete 组件即可，看一下我们怎么改造搜索框让它支持自动完成功能：

<nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
  <input 
         type="text"
         nz-input 
         placeholder="Search stories by title, url or author" 
         [formControl]="searchControl" 
         [nzAutocomplete]="auto" />
</nz-input-group>
<ng-template #prefixTemplate>
  <i nz-icon nzType="search"></i>
</ng-template>
<ng-template #suffixTemplate>
  <i
     nz-icon
     class="ant-input-clear-icon"
     nzType="close-circle"
     *ngIf="queryString"
     (click)="searchControl.setValue('')"></i>
</ng-template>
<nz-autocomplete #auto>
  <nz-auto-option *ngFor="let option of filteredOptions" [nzValue]="option">
    {{ option }}
  </nz-auto-option>
</nz-autocomplete>

我们在 valueChanges 订阅时获取输入值并修改 Autocomplete 选项：

// all autocomplete options
options = ['APPLE', 'HUAWEI', 'SONY', 'XIAOMI'];
this.searchControl.valueChanges.pipe(
  debounceTime(300),
  takeUntil(this.destroy$)
).subscribe(query => {
  // ignore case
  this.filteredOptions = this.options.filter(option => option.toLowerCase().indexOf(query.toLowerCase()) === 0);
  ...
});

这样，一个能够支持自动补全（搜索建议）的输入框就完成了，当然真实的项目中，完整的搜索建议应该是通过 API 请求返回的，但是逻辑上是一致的，感兴趣的同学可以尝试远程请求数据来渲染自动完成功能。

总结 & 预告

今天功能完成后，我们需要的功能基本就这样了，一些小的细节功能我们并没有去具体实现，如果之后有时间，我也会完善这些，有意愿尝试的同学也可以自行开发剩下的工作。两个例子我们介绍了 NG-ZORRO 一些常用的组件，之后我们主要会偏向组件定制化、主题、国际化、社区贡献等多方面进行进一步地学习组件库的内容。

angular监听输入框值的变化_[Angular 组件库 NG-ZORRO 基础入门] - Hacker News: 搜索