Instantsearch

Instantsearch

关注
发信
关注(28)粉丝(399)

Ionic 3 中的 Algolia Instantsearch.js

本文介绍了Ionic 3 中的 Algolia Instantsearch.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在我的 Ionic 3 应用程序中使用来自 Algolia 的 Instantsearch.js 库.这是我遵循的教程.

https://angularfirebase.com/lessons/angular-full-text-search-with-algolia-frontend-part-1/

这是我得到的错误

_WEBPACK_IMPORTED_MODULE_3_instantsearch_js__.instantsearch 不是函数

我已经使用以下命令通过 npm 导入了它.

npm install instantsearch.js --save

SearchPage.ts

import { Component } from '@angular/core';import { IonicPage, NavController, NavParams } from 'ionic-angular';从'./../../app/app.algolia.config'导入{ ALGOLIA_CONFIG };从 'instantsearch.js' 导入 * 作为即时搜索；@IonicPage()@成分({选择器:'页面搜索'，templateUrl: 'search.html',})导出类 SearchPage {搜索:任何；构造函数(公共导航控件:导航控制器，公共导航参数:导航参数){}ionViewDidLoad() {console.log('ionViewDidLoad SearchPage');控制台日志(ALGOLIA_CONFIG)；控制台日志(即时搜索)this.search = 即时搜索(ALGOLIA_CONFIG)；//搜索框小部件this.search.addWidget(Instantsearch.widgets.searchBox({容器:'#搜索框'，自动对焦:假，占位符:'搜索演员'，供电:真}));//初始化点击小部件this.search.addWidget(Instantsearch.widgets.hits({容器:'#hits'，模板:{空:'没有结果'，项目:`<img src=https://image.tmdb.org/t/p/w300{{image_path}} width="50px"><strong>结果{{objectID}}</strong>:{{{_highlightResult.name.value}}}`},逃生命中:真的}));this.search.addWidget(Instantsearch.widgets.stats({容器:'#stats'}));this.search.addWidget(Instantsearch.widgets.pagination({容器:'#分页'，最大页数:20，}));this.search.addWidget(Instantsearch.widgets.analytics({pushFunction:(查询，状态，结果)=>{控制台日志(查询)控制台日志(状态)控制台日志(结果)}}));this.search.start();}}

搜索.html

<离子导航栏><ion-title>搜索</ion-title></ion-navbar></ion-header><离子含量填充><h1>测试Algolia</h1><div id="搜索框"><!-- SearchBox 小部件将出现在这里-->

<div id="统计信息"><!-- 统计小部件将出现在这里-->

<div id="hits"><!-- 点击小部件将出现在这里-->

<div id="分页"><!-- 分页小部件将出现在这里-->

</离子含量>

我也试过在没有/es 的情况下导入它.

这是console.log(instantsearch)的输出

{__esModule: true, default: ƒ}默认:ƒ 工厂()创建查询字符串:ƒ(状态，选项)版本:2.2.1"连接器:[例外:ReferenceError:您无法直接从 ES6 构建访问instantsearch.connectors".在 Function.get (http://localhost:8100/build/0.js:9985:11) at Function.remoteFunction (<anonymous>:2:14)]长度:0姓名:工厂"原型:EventEmitter {constructor: ƒ, addWidget: ƒ, start: ƒ, createURL: ƒ, _render: ƒ, ...}小部件:[例外:ReferenceError:您无法直接从 ES6 构建访问instantsearch.widgets".在 Function.get (http://localhost:8100/build/0.js:9979:11) at Function.remoteFunction (<anonymous>:2:14)]获取连接器:ƒ 获取()获取小部件:ƒ 获取()__原型__:ƒ 即时搜索(_ref)[[功能位置]]:to-factory.js:5[[范围]]:范围[3]__es 模块:真的__原型__:目的
解决方案

你能试试这样导入instantsearch吗:

从'instantsearch.js/es'导入instantsearch；从'instantsearch.js/es/widgets'导入{searchBox}；

这样它就会导入唯一需要的模块，它应该可以在 Angular2/Ionic 应用程序中工作.

如果您想了解有关如何在 Angular2/Ionic 应用程序中集成 Instantsearch.js 的更多信息，您应该在这里阅读我们的集成指南:https://community.algolia.com/instantsearch.js/v2/guides/angular-integration.html

我们也在积极努力发布一个 angular-instansearch 库，这将在接下来的几个月内实现.如果您有兴趣加入 Beta 计划，请填写此文件:https://docs.google.com/forms/u/2/d/e/1FAIpQLSeqEHS0VjnNlaKMp7Cm0y7pRe2pLz-39y3-cEAs5o-H0-HD6A/viewend_formus

I am trying to use the instantsearch.js library from Algolia within my Ionic 3 app. Here is the tutorial that I followed.

https://angularfirebase.com/lessons/angular-full-text-search-with-algolia-frontend-part-1/

Here is the error that I get

_WEBPACK_IMPORTED_MODULE_3_instantsearch_js__.instantsearch is not a function

I already imported it via npm with the following command. 

npm install instantsearch.js --save

SearchPage.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ALGOLIA_CONFIG } from './../../app/app.algolia.config';
import * as instantsearch from 'instantsearch.js';

@IonicPage()
@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
})
export class SearchPage {

  search: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SearchPage');
    console.log(ALGOLIA_CONFIG);
    console.log(instantsearch)
    this.search = instantsearch(ALGOLIA_CONFIG);
    // search box widget
    this.search.addWidget(
      instantsearch.widgets.searchBox({
        container: '#search-box',
        autofocus: false,
        placeholder: 'Search for actors',
        poweredBy: true
      })
    );

    // initialize hits widget
    this.search.addWidget(
      instantsearch.widgets.hits({
        container: '#hits',
        templates: {
          empty: 'No results',
          item: `<img src=https://image.tmdb.org/t/p/w300{{image_path}} width="50px">
                <strong>Result {{objectID}}</strong>:
                {{{_highlightResult.name.value}}}`
        },
        escapeHits: true
      })
    );

    this.search.addWidget(
      instantsearch.widgets.stats({
        container: '#stats'
      })
    );

    this.search.addWidget(
      instantsearch.widgets.pagination({
        container: '#pagination',
        maxPages: 20,
      })
    );

    this.search.addWidget(
      instantsearch.widgets.analytics({
        pushFunction: (query, state, results) => {
          console.log(query)
          console.log(state)
          console.log(results)
        }
      })
    );

    this.search.start();
  }

}

search.html

<ion-header>

  <ion-navbar>
    <ion-title>Search</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <h1>Test Algolia</h1>

  <div id="search-box">
    <!-- SearchBox widget will appear here -->
  </div>
  <div id="stats">
    <!-- stats widget will appear here -->
  </div>
  <div id="hits">
    <!-- Hits widget will appear here -->
  </div>
  <div id="pagination">
    <!-- pagination widget will appear here -->
  </div>
</ion-content>

I have tried importing it without /es as well.

Here is the output of the console.log(instantsearch)

{__esModule: true, default: ƒ}
default
:
ƒ Factory()
createQueryString
:
ƒ (state, options)
version
:
"2.2.1"
connectors
:
[Exception: ReferenceError: You can't access to 'instantsearch.connectors' directly from the ES6 build. Import the connectors this way 'import {connectSearchBox} from "instantsearch.js/connectors"' at Function.get (http://localhost:8100/build/0.js:9985:11) at Function.remoteFunction (<anonymous>:2:14)]
length
:
0
name
:
"Factory"
prototype
:
EventEmitter {constructor: ƒ, addWidget: ƒ, start: ƒ, createURL: ƒ, _render: ƒ, …}
widgets
:
[Exception: ReferenceError: You can't access to 'instantsearch.widgets' directly from the ES6 build. Import the widgets this way 'import {SearchBox} from "instantsearch.js/widgets"' at Function.get (http://localhost:8100/build/0.js:9979:11) at Function.remoteFunction (<anonymous>:2:14)]
get connectors
:
ƒ get()
get widgets
:
ƒ get()
__proto__
:
ƒ InstantSearch(_ref)
[[FunctionLocation]]
:
to-factory.js:5
[[Scopes]]
:
Scopes[3]
__esModule
:
true
__proto__
:
Object
解决方案

Can you try to import instantsearch that way:

import instantsearch from 'instantsearch.js/es';
import { searchBox } from 'instantsearch.js/es/widgets';

That way it will import the only needed modules and it should work into an Angular2/Ionic application.

If you want to learn more on how to integrate instantsearch.js inside an Angular2/Ionic application you should read our integration guide over here: https://community.algolia.com/instantsearch.js/v2/guides/angular-integration.html

We are also working actively to ship an angular-instansearch library, this will happen in the next months. If you are interested into joining the beta program can you fill this document please: https://docs.google.com/forms/u/2/d/e/1FAIpQLSeqEHS0VjnNlaKMp7Cm0y7pRe2pLz-39y3-cEAs5o-H0-HD6A/viewform?usp=send_form

这篇关于Ionic 3 中的 Algolia Instantsearch.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-21 20:06
Powered by LMLPHP ©2025 Instantsearch 0.001766