select 实现搜索功能_[Angular 组件库 NG-ZORRO 基础入门] - 源码初窥: Select - 2

前言回顾

目前我们已经了解了 nz-select 组件的基本设计结构，我们昨天已经知道了 nz-select 被拆分为：nz-select-top-control / nz-option-container / nz-option 等部分，我们继续来了解一下其实现过程。

组件模块

NzSelectTopControlComponent

我们先看一下 nz-select-top-control.component.ts，这个组件承担了显示已选项目的功能，我们查看其代码发现 OnInit 中监听了一些事件：

ngOnInit(): void {
    
  // 监听弹出层打开事件，自动 focus
  this.nzSelectService.open$.pipe(takeUntil(this.destroy$)).subscribe(open => {
    
    if (this.inputElement && open) {
    
      setTimeout(() => this.inputElement.nativeElement.focus());
    }
  });
// 监听清除事件，针对 search 搜索模式
this.nzSelectService.clearInput$.pipe(takeUntil(this.destroy$)).subscribe(() => {
    
  this.setInputValue('');
});
// 点击选项后手动触发变化检测，更新页面
this.nzSelectService.check$.pipe(tak