После моего предыдущего поста Algolia Instantsearch.js, наполненный Angular 4, Algolia Search выпустила Instantsearch.js Connectors Versions 2, что действительно сделало работу с Angular 2+ отличной.

Они действительно имели в виду Angular с этими новыми реализациями.

Поэтому мне придется пропустить некоторые части этого руководства, такие как создание компонентов и установка Angular, поскольку это уже было затронуто в моем предыдущем посте Algolia Instantsearch.js, наполненный Angular 4.

Обновление предыдущей публикации

Итак, теперь мы сначала заставим наше поисковое приложение Algolia работать с коннекторами, импортировав коннекторы Instantsearch.js (пока мы будем работать с коннекторами Hit «ConnectHits»).

import * as instantsearch from 'instantsearch.js';
import {connectHits} from "instantsearch.js/es/connectors/index";

Итак, после импорта Instantsearch.js и соответствующего коннектора нам нужно будет фактически распечатать наши данные из поиска Algolia, и для этого нам нужно будет сначала создать функцию рендеринга, которая будет выводить наши данные.

renderFn(HitsRenderingOptions) {
 HitsRenderingOptions.widgetParams.subject.next(HitsRenderingOptions.hits);
}

В функции renderFn мы получаем HitsRenderingOption, который обозначает различные параметры для соединителей, вы можете посетить https://community.algolia.com/instantsearch.js/documentation/#custom-widgets.

После функции renderFn мы используем функцию renderFn в функции connect Hits.

let customHits = connectHits(this.renderFn);
  this.search.addWidget(
  customHits({
   subject: this.hitts
  })
);

Функция рендеринга выводит переменную hits, в которую будет вставлена ​​переменная customHits. Затем после присвоения переменной мы используем переменную customHits как функцию, которая используется внутри функции search.addwidget ().

Внутри customHits мы назначаем тему (которая является результатом рендеринга).

Итак, это то, что касается файла компонента. Итак, перейдем к файлу шаблона HTML.

<li *ngFor="let hit of hitts">         
  {{ hit }}
</li>

Переменная hitts была назначена из компонентов, а директива * ngFor используется для циклического перебора массива объектов.

Полный код

//search.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import * as instantsearch from 'instantsearch.js';
import {connectHits} from "instantsearch.js/es/connectors/index";
declare var instantsearch: any;
@Component({
selector: 'search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
search: any;
constructor() { }
ngOnInit() {
const options = environment.algolia;
this.search = instantsearch(options);
this.search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box'
})
);
// initialize custom hits widget
let customHits = connectHits(this.renderFn);
this.search.addWidget(
  customHits({
   subject: this.hitts
  })
);
this.search.start();
}
renderFn(HitsRenderingOptions) {
HitsRenderingOptions.widgetParams.subject.next(HitsRenderingOptions.hits);
}
}
//search.component.html
<div id="search-box">
<!-- SearchBox widget will appear here -->
</div>
<!-- Hits List --->
<li *ngFor="let hit of hitts">         
  {{ hit }}
</li>
<!-- End Hits List --->

Приведенный выше код является обновлением моей предыдущей публикации. Соединители Algolia Instantsearch.js позволяют использовать директивы Angular.

Я надеюсь, что это руководство поможет вам преодолеть трудности, связанные с реализацией замечательного поиска Algolia с Angular 2/4.

Спасибо.

.