将AlgoliaInstantSearch与Angular集成

我们已经介绍了如何将 Algolia InstantSearch 集成到 Vue.js 应用程序中，现在让我们来看看如何为 Angular 应用程序做同样的事情。这现在很容易做到，这要归功于最近发布的 Angular InstantSearch 库。

Algolia 提供流行的搜索即服务解决方案，使创建和搜索索引数据集变得容易。例如，这个网站上的即时搜索由 Algolia 和 Jekyll Algolia 插件提供支持。

请注意，您需要将 Angular InstantSearch 与 Angular 4+ 一起使用。

设置

您需要一个可以查询的 Algolia 索引。创建和填充数据索引是一个完全不同的主题，所以在这里我们假设您已经建立了一个索引。出于本文的目的，我们将使用 Algolia 提供的测试索引。

首先，将 angular-instantsearch 包添加到您的 Angular 项目中：

# using Yarn:
$ yarn add angular-instantsearch

# or npm:
$ npm i angular-instantsearch

接下来，在您的应用模块或功能模块中，导入 NgAisModule 并将其添加到您的导入列表中：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { NgAisModule } from 'angular-instantsearch';
import { AppComponent } from './app.component';

如果在 Angular 功能模块中使用 NgAisModule，则省略对 forRoot() 的调用。

最后，您还需要为 InstantSearch 添加样式文件。您可以将以下条目添加到 .angular-cli.json 的样式数组中：

.angular-cli.json

...
"styles": [
  "styles.css",
  "../node_modules/angular-instantsearch/bundles/instantsearch.min.css",
  "../node_modules/angular-instantsearch/bundles/instantsearch-theme-algolia.min.css"
],
...

对 .angular-cli.json 文件进行更改后，您需要重新启动本地服务器。

用法

一切都从 ng-ais-instantsearch 组件开始，它将成为 InstantSearch 小部件的包装器。 ng-ais-instantsearch 采用带有 Algolia 索引的键和名称的配置对象：

app.component.html

<ng-ais-instantsearch [config]="algoliaConfig">
  <!-- Widgets here -->
</ng-ais-instantsearch>

app.component.ts

import { Component } from '@angular/core';

现在我们已经准备好并配置了包装器，我们可以开始添加小部件来查询和过滤索引：

app.component.html

<ng-ais-instantsearch [config]="algoliaConfig">
  <ng-ais-search-box></ng-ais-search-box>
  <ng-ais-stats></ng-ais-stats>

  <h3>Filter by price range:</h3>
  <ng-ais-refinement-list attribute="salePrice_range"></ng-ais-refinement-list>
  <ng-ais-clear-refinements [autoHideContainer]="true" buttonLabel="Clear filter"></ng-ais-clear-refinements>

  <ng-ais-hits>
    <ng-template let-hits="hits" let-results="results">
      <!-- Nothing found? -->
      <div *ngIf="hits.length === 0">
        😢 Nothing found for
        <strong>{{results.query}}</strong>.
      </div>

      <div *ngFor="let hit of hits" class="result-card">
        <h2>
          <a [href]="hit.url" target="_blank">
            <ng-ais-highlight attribute="name" [hit]="hit">
            </ng-ais-highlight>
          </a>
        </h2>
        <p>{{ hit.shortDescription }}</p>

        <img [src]="hit.image" alt="{{ hit.name }} thumbnail">

        <p>
          <span class="price">{{ hit.salePrice | currency}}</span>
        </p>
      </div>
    </ng-template>
  </ng-ais-hits>

  <ng-ais-pagination></ng-ais-pagination>
</ng-ais-instantsearch>

在这里，我们使用了 Algolia InstantSearch 提供的一些小部件：

ng-ais-search-box：搜索输入查询索引。
ng-ais-stats：关于搜索结果的统计信息。
ng-ais-refinement-list：通过索引中的属性过滤结果的选项（称为细化）。
ng-ais-clear-refinements：用于清除应用的细化的按钮。
ng-ais-hits：魔法发生的地方并显示结果（hits）。在这里，我们使用 ng-template 定义了一个模板，以便我们可以使用自己的标记格式化 hits。我们可以访问 hits 和 results 变量，每个 hit 都包含一个结果的数据作为对象。
ng-ais-highlight：突出显示与查询匹配的搜索部分的小部件。
ng-ais-pagination：用于附加结果的分页小部件。

然后让我们对搜索结果应用一些样式：

app.component.css

ng-ais-clear-refinements {
  display: block;
  margin-top: 1rem;
}

::ng-deep .ais-Hits {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  margin-top: 2rem;
}
::ng-deep .result-card {
  padding: 0.45rem 2rem;
  background: linear-gradient(45deg, #eee, white 50%);
  border-radius: 6px;
  border: 2px solid #f3f3f3;
}

请注意使用 ::ng-deep 选择器来访问嵌套在小部件内的元素。

这是我们生成的 UI：

🕵️ 查询您的索引，玩得开心！您可以参考官方 API 文档以获取有关可用小部件的更多详细信息。