Algolia Angular Instant Search：创建自定义搜索框模板答案

【问题标题】：Algolia Angular Instant Search: Create a custom search box templateAlgolia Angular Instant Search：创建自定义搜索框模板
【发布时间】：2019-03-21 10:26:05
【问题描述】：

要求的行为：
我想使用 Algolia Angular 即时搜索功能创建一个自动建议搜索框。这个搜索框应该有一个 Angular Material 设计。因此我想使用<ais-search-box></ais-search-box> 组件，但我想添加自己的模板。

当前状态
我重新创建了一个工作的 Angular Instant Search 组件。根据要求，如果我输入字符串，该组件会提供正确的搜索结果。

问题
现在，我想替换标准的<ais-search-box></ais-search-box> 并用我的自定义<app-search-box></app-search-box> 替换它。我按照他们的搜索框组件的Customize the UI documentation 设置了我的代码。如果这样做，我会收到以下错误：

成员 'refine' 不可调用

这就是我的组件不再工作的原因吗？如果是这样，我该如何解决？

我的自定义搜索框组件不起作用

import { Component, Inject, forwardRef } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectSearchBox } from 'instantsearch.js/es/connectors';

// (keyup)="this.state.refine(input.value)" throws the error
@Component({
  selector: 'app-search-box',
  template: `
<input
  type="text"
  #input
  (keyup)="this.state.refine(input.value)"
  [value]="this.state.query"
/>
`
})
export class SearchBox extends BaseWidget {
  public state: {
     query: string;
     refine: Function;
     clear: Function;
     isSearchStalled: boolean;
     widgetParams: object;
  };
  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super('SearchBox');
    this.createWidget(connectSearchBox, {
      // instance options
    });
  }
}

我的工作搜索组件

import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent {
  searchConfig = {
    ...environment.algolia,
    indexName: 'ideas'
  };

  showResults = false;

  constructor() { }

  searchChanged(query) {
    if (query.length) {
      this.showResults = true;
    } else {
      this.showResults = false;
    }
  }
}

我的工作 html 模板

<ais-instantsearch [config]="searchConfig">
  <!---working ais search box component-->
  <ais-search-box (change)="searchChanged($event)"></ais-search-box>

    <!---should be replaced by my custom search-box component.-->
    <!--<app-search-box (change)="searchChanged($event)"></app-search-box>-->
  
    <ais-hits *ngIf="showResults">
        <ng-template let-hits="hits">
            <div *ngFor="let hit of hits">  
                <div class="bio">
                    {{ hit.ideaText }}
                </div>
            </div>
        </ng-template>
    </ais-hits>
  </ais-instantsearch>

【问题讨论】：

标签： javascript angular typescript search algolia

【解决方案1】：

使用 Angular 材质检查

HTML

<mat-form-field class="col-sm-10" (keydown)="keyDownFunction($event)">
      <input matInput type="search" placeholder="Buscar:" name="search" [(ngModel)]="searchbox"
        (keyup)="onQuery($event)" (ngModelChange)="updatedVal($event)">
    </mat-form-field>

public searchbox;
private query: string = "";

//Enter KEY
    keyDownFunction($event) {

        const text = this.query;

        if ($event.keyCode == 13) {
            this._router.navigate([`/search/${text.replace(/\s+/g, '_')}`])
        }
    }

//Button KEY
    BtnFunction($event) {

        const text = this.query;

        if ($event) {
            this._router.navigate([`/search/${text.replace(/\s+/g, '_')}`])
        }
    }

// Algolia KEY
    onQuery($event) {
        this.query = $event.target.value;
    }

【讨论】：