在 angular 中自定义 algolia 的搜索框

Question

我在 angular 中使用 algolia。
有一个我想自定义的搜索框。
这是我到目前为止所做的。
.html 文件 -

<ais-instantsearch [config]="productsConfig">
    <ais-search-box></ais-search-box>
    <ais-hits>
    </ais-hits>
<ng-template let-hits="hits">

.ts 文件

import { Component, OnInit } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
import algoliasearch from 'algoliasearch/lite';
import { environment } from 'src/environments/environment';

const searchClient = algoliasearch(
  environment.algolia_application_id,
  environment.algolia_search_api_key
);

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})

export class ProductsComponent implements OnInit {

  constructor() { }

  productsConfig = {
      indexName: 'products',
      searchClient
  };

  ngOnInit(): void {
  }
}

我无法自定义搜索框。
如何在 angular 中自定义 algolia 的搜索框？
任何帮助将不胜感激。
谢谢

Answer 1

希望这有助于参考问题：https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js/

Answer 2

我无法自定义搜索框，所以我尝试了不同的方式。
组件文件 -

  getProductList(){
      var parameters = {
        query : '',
        hitsPerPage : 1,
        filters: `doctorId = ${this.doctorId}`
      };
      this.algoliaService.getData('products', parameters)
        .then(data => {
          if( data.hits.length > 0 )
          {
            this.doctorDetails = data.hits[0];
          }       
      })
  }

服务文件-

getData(indexName, parameters) : any {
  const index = searchClient.initIndex(indexName);
  return index.search(parameters);
}

这样你就可以从组件文件中获取数据，所以你不需要自定义搜索。只需要在参数中传递您的搜索框值即可。

在 angular 中自定义 algolia 的搜索框

Customize algolia's search box in angular

angular

algolia

instantsearch.js