Question

请求的行为：
我想使用Algolia Angular即时搜索功能创建一个自动建议的搜索框。此搜索框应具有“角材料”设计。因此，我想使用<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>

Answer 1

使用Angular Material进行确认

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>

TS

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;
    }

Algolia Angular即时搜索：创建自定义搜索框模板

1 个答案: