Angular Algolia Instant Search两大问题咨询：搜索框绑定与数据过滤

嘿，我刚好用Algolia Instant Search在Angular项目里折腾过，来帮你搞定这两个问题！

1. 绑定并控制<ng-ais-search-box>的输入值 #

要实现点击填充指定字符串到搜索框，你可以通过获取SearchBox组件实例调用Algolia的API来设置查询词，具体步骤如下：

• 首先在组件类中用ViewChild获取SearchBoxComponent的实例：

import { Component, ViewChild } from '@angular/core';
import { SearchBoxComponent } from 'angular-instantsearch';

@Component({
  selector: 'app-your-search-component',
  templateUrl: './your-search-component.component.html'
})
export class YourSearchComponent {
  @ViewChild(SearchBoxComponent) searchBox!: SearchBoxComponent;

  // 点击时填充指定字符串的方法
  fillSearchText() {
    // 调用Algolia实例的setQuery方法设置搜索词
    this.searchBox.instantSearchInstance.setQuery('你要填充的产品关键词');
  }
}

• 然后在模板里添加触发按钮，绑定这个方法：

<ng-ais-search-box placeholder='Search for products'></ng-ais-search-box>
<button (click)="fillSearchText()">填充推荐搜索词</button>

如果需要双向绑定搜索框的值，你可以监听搜索框的queryChange事件同步到本地变量，再通过setQuery反向控制：

// 本地变量存储搜索词
currentQuery = '';

// 监听搜索框的query变化
onQueryChange(newQuery: string) {
  this.currentQuery = newQuery;
}

// 手动设置搜索词
setCustomQuery() {
  this.currentQuery = '自定义关键词';
  this.searchBox.instantSearchInstance.setQuery(this.currentQuery);
}

模板里加上事件绑定：

<ng-ais-search-box 
  placeholder='Search for products'
  (queryChange)="onQueryChange($event)"
></ng-ais-search-box>

2. 利用分面（Facets）实现数据过滤 #

既然你已经在后台控制台设置好了分面字段，前端只需要用对应的Angular Instant Search组件就能快速实现过滤，常用的组件有这几种：

选项列表过滤（比如品牌、分类） #

用<ais-refinement-list>组件，直接指定你在后台设置的分面字段即可：

<!-- 假设你后台设置了"category"作为分面字段 -->
<ais-refinement-list attribute="category"></ais-refinement-list>

这个组件会自动渲染该字段的所有可选值，用户点击就能过滤结果，同时支持多选、搜索分面值等功能。

开关式过滤（比如是否有库存） #

如果是布尔型的分面字段，用<ais-toggle-refinement>更合适：

<ais-toggle-refinement 
  attribute="inStock"
  label="仅显示有库存商品"
></ais-toggle-refinement>

查看当前过滤条件 #

可以用<ais-current-refinements>组件展示用户已选的过滤项，还支持一键清除：

<ais-current-refinements></ais-current-refinements>

手动控制过滤（进阶） #

如果需要通过代码手动添加过滤条件，可以通过InstantSearch实例的addWidgets或者直接操作refinement组件的实例：

import { InstantSearchService } from 'angular-instantsearch';
import { refinementList } from 'instantsearch.js/es/widgets';

@Component({...})
export class YourComponent {
  constructor(private instantSearchService: InstantSearchService) {}

  addCustomFilter() {
    const brandFilter = refinementList({
      attribute: 'brand',
      defaultRefinement: ['Nike']
    });
    this.instantSearchService.addWidgets([brandFilter]);
  }
}

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