Рубрики
Без рубрики

Использование Algolia Instansearch.js с угловым 4

Узнайте, как наносить Algolia Instantsearch.js с угловым 4, чтобы оптимизировать ваши поисковые услуги.

Автор оригинала: Temidayo Ajisebutu.

Я обычно не большую частью блогера или ориентированного на общественный человек, но мне просто пришлось блог о моем опыте с угловыми 4 и Algolia Instantsearch.js.

Я разрабатывал проект, который нуждался в оптимизированной поисковой службе, которая заключается в том, что он узнал об Algolia Search с моего друга. Я хотел использовать его, но вводит его в мой проект, было трудно, потому что я не мог найти никаких учебников, таких как этот вы читаете, это может помочь мне изучить Альголия и угловые 4.

Достаточно введения – давайте пойдем прямо в инфузирующие Algolia Instantsearch.js с угловым 4!

Во-первых, мы должны установить угловую CLI для нашего проекта:

npm install @angular/cli@latest --save

После вставки вышеуказанного кода в нашу командную строку мы создадим новый проект.

ng new alsearch
cd alsearch
ng serve

Перейдите к http://localhost: 4200/ Отказ Приложение автоматически перезагрузится, если вы измените любой из исходных файлов.

Вы можете настроить HTTP-хост по умолчанию и порт, используемый сервером разработки с двумя параметрами командной строки:

ng serve --host 0.0.0.0 --port 4201

После игры с командной строкой вы можете вернуться к вашему проекту и ссылку Link Algolia Instancearch.js с вашим угловым 4 проектом, вставляя код ниже в файл окружающей среды.

Окружающая среда находится в папке окружающей среды, которая находится в папке SRC /src/environments/environment.ts Отказ 

export const environment = {
 production: false,
 algolia: {
  appId: 'APP_ID',
  apiKey: 'SEARCH_ONLY_KEY',
  indexName: 'getstarted_actors',
  urlSync: false
 }
};

После этого нам нужно установить instansearch.js Пакет так, чтобы мы могли использовать различные пакеты поиска Angolia.

npm install instantsearch.js --save

Если вы хотите использовать CSS algolia CSS и шаблоны, добавьте следующие строки в голову index.html файл.

Компонент поиска

Вся наша функция поиска будет завернута в search.component.ts , который вы можете сгенерировать с NG G Компонент Поиск Отказ Во время Ngoninit Вы настраиваете Instansearch С вашим переменным окружающей среды и звоните .start () Инициализировать его. Использовать Объявите VAR Instantancearch: любой Чтобы очистить некоторые ошибки, которые могут быть встречены при использовании Instansearch Отказ

import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import * as instantsearch from 'instantsearch.js';
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.start();
 }
}

Вы можете построить интерфейс поиска ALGOLIA, добавив к нему виджеты. Давайте начнем с добавления поля поиска и результаты (хиты) на наш компонент.

this.search.addWidget(
 instantsearch.widgets.searchBox({
  container: '#search-box'
 })
);
// initialize hits widget
this.search.addWidget(
 instantsearch.widgets.hits({
  container: '#hits',
 })
);

Поиск HTML

В шаблоне вы можете идентифицировать элементы, которые вы хотите заменить с виджетами.

Чтобы использовать пользовательский шаблон для результатов, показанных вместо простого текста по умолчанию, вы можете использовать код ниже.

Вы также можете добавить шаблон для определенных виджетов с усами и интерполировать данные с двойными вьющимися скобками. В виджете хитов я отображаю имя и изображение актера, а не в RAW JSON.

this.search.addWidget(
 instantsearch.widgets.hits({
  container: '#hits',
  templates: {
   empty: 'No results',
   item: `
   Result {{objectID}}:
    {{{_highlightResult.name.value}}}`
  },
  escapeHits: true
 })
);

Полный код

//search.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import * as instantsearch from 'instantsearch.js';
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
 this.search.addWidget(
  instantsearch.widgets.hits({
   container: '#hits',
   templates: {
    empty: 'No results',
    item: `
    result {{objectID}}:
     {{{_highlightResult.name.value}}}`
    },
    escapeHits: true
   })
 );
 this.search.start();
 }
}


//search.component.html

Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий ниже!

Читайте ещё по теме: