algolia: angular-instantsearchv2에서 v3으로 업그레이드

V2 문제

v3로 하면 사용할 수 있는 옵션이 늘어나므로 꼭 업그레이드하고 싶다. 예를 들어 현재는 스마트 폰에 대응할 수 없습니다. 실시간 검색이므로 문자 입력하면 순식간에 결과가 돌아오지만, 스마트 폰이라면 이런 상황 ↓

키패트 화면이 방해로 보이지 않는다.
완료를 터치하여 닫으면 검색 결과도 사라집니다.

업그레이드 시도

단순히 업그레이드 명령이 작동하지 않습니다.

$ npm install --save instantsearch@^3

Not Found 404 오류가 발생합니다.
참고 : Migration from v2 to v3

설치 시도

그래서 스크래치 설치를 시도했다 (반드시 Git하고 나서 작업)
참고 : Installation

절차에 따라 ng build하면 다음 오류

import algoliasearch from 'algoliasearch/lite';
          ~~~~~~~~~~~~~

  ../node_modules/@types/algoliasearch/lite/index.d.ts:191:1
    191 export = algoliasearch;
        ~~~~~~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

이것은 tsconfig.json을 괴롭히고 나서 다시 빌드 할 수 있었다.
참고 : htps : // 기주 b. 코 m/ゔぃsjs/ゔぃs-네토 rk/이스에 s/67

...
"allowSyntheticDefaultImports": true, <=追加
...

해결.


이번에는 검색할 수 없습니다.

검색할 때 The indexName option is required. 오류입니다.


아무래도 컨피그의 쓰는 방법이 바뀐 것 같다.
옛날 쓰기

Config = { 
          appId: 'TOxxxxxxM',
          apiKey: '8cefxxxxxxxxxxxxxxxxxxxc10',
          indexName: 'comments'
}

새로운 쓰기

Config = {  
    indexName: 'comments',
    searchClient: algoliasearch('TOxxxxxxM', '8cefxxxxxxxxxxxxxxxxxxxc10')
  };

참고 : What Is Angular InstantSearch?

그렇습니다 해결책.

<ais-search-box></ais-search-box> 수정

지금까지 V2에서는 다음과 같이 placeholder밖에 살지 않았다.

<ais-search-box placeholder="質問フォーラム内検索"></ais-search-box>

[searchAsYouType]="false" 를 추가하여 실시간 검색을 해제할 수 있습니다.

<ais-search-box placeholder="質問フォーラム内検索" [searchAsYouType]="false" submitTitle="検索" resetTitle="クリア">

엔터 키를 누르거나 🔍을 클릭 or 터치하지 않으면 검색하지 않게 되므로, 스마트폰으로 입력한 후 키 화면을 닫고 검색 버튼(🔍)을 터치하고 나서 결과를 표시하는 조작을 할 수 있게 된다 했다.
…submitTitle="検索" resetTitle="クリア"> 로 마음대로 버튼을 할 수 있을까 생각했지만 그렇지 않다. 🔍과 ✖로 마우스 오버하면 문자가 표시될 뿐. 글쎄 좋아.
참고 : ais-search-box

페이지네이션

페이지 네이션은 다음과 같이.

<ais-pagination padding="2"></ais-pagination>

참고 : pagination

위생

검색 결과의 표시는 모두 위생화되어 있다. 코멘트란은 HTML의 해석을 용서하고 싶었지만 무리한 것 같다.

정렬

컬럼마다 정렬하거나 할 수 있게 되었다(replica라는 것을 만들어야 한다) 이런 느낌↓


지금은 필요 없지만 그 가운데 만들려고 한다.

참고 : ais-sort-by

후기

algolia 인스턴트 검색은 정보가 적기 때문에 수작업으로 해 나갈 수밖에 없다. 라고 생각한다.

참고 : htps : // / s suntsu rchjs. 네 tぃfy. 이 m/s 토리 s/? 파 th = / s 및 ry / 가시 cs-sea rchbo x-sea rch-on-en-r