ng-select中ng-typetosearch-tmp与ng-notfound-tmp的用途是什么

这两个是@ng-select/ng-select组件内置的自定义模板指令，不需要额外引入模块即可使用，在官方文档找不到对应说明的原因是：这两个是v5版本之前的旧命名，新版文档只收录了调整后的新命名规则，旧指令目前仍保持向下兼容，源码层面可正常识别。

ng-typetosearch-tmp #

• 核心作用：控制下拉面板展开、搜索框无任何输入内容时的展示内容
• 默认表现：不自定义的情况下，开启搜索功能的ng-select在空输入状态下，下拉面板要么直接展示全量选项，要么展示空面板，无引导提示
• 适用场景：
  • 下拉选项为远程接口加载的分页/搜索数据，本地无全量选项缓存时，用来提示用户输入关键词触发检索，避免用户以为下拉加载异常
  • 表单交互引导，明确告知用户该下拉支持关键词搜索，减少用户手动滚动长列表查找选项的成本
• 生效规则：仅在搜索框内容为空、下拉处于展开状态时渲染，用户输入任意字符后该模板自动隐藏

ng-notfound-tmp #

• 核心作用：控制用户输入搜索关键词后、无任何匹配选项时的下拉面板展示内容
• 默认表现：不自定义的情况下，无匹配结果时组件会展示内置的默认文本No items found
• 适用场景：
  • 替换默认的英文提示为业务需要的自定义文案，比如适配中文场景的“未找到匹配选项，请调整关键词后重试”
  • 扩展无结果状态的交互，比如在提示区域增加“新增条目”“联系管理员添加选项”之类的操作入口
  • 自定义提示样式，匹配项目自身的设计规范，替换默认提示的字体、颜色、边距等视觉效果
• 生效规则：仅在搜索框有输入内容、过滤后选项列表长度为0时渲染

参考使用示例 #

<ng-select 
  [searchable]="true"
  [items]="userList"
  bindLabel="userName"
  placeholder="请选择用户">
  <!-- 空输入状态引导 -->
  <ng-template ng-typetosearch-tmp>
    <div class="ng-option-disabled">
      请输入用户名关键词搜索
    </div>
  </ng-template>
  <!-- 无搜索结果提示 -->
  <ng-template ng-notfound-tmp>
    <div class="ng-option disabled">
      未找到匹配的用户，可尝试更换关键词搜索
    </div>
  </ng-template>
</ng-select>

补充：v5及以上版本的ng-select对模板指令命名做了统一调整，去掉了后缀-tmp，对应新指令为ngTypectosearch、ngNotFound，旧的带后缀写法目前仍可正常运行，新项目推荐使用新版命名。

内容的提问来源于stack exchange，提问作者Natanael Medina