Ionic 3 中的 Algolia Instantsearch.js
Algolia Instantsearch.js in Ionic 3
我正在尝试在我的 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 is not a function
我已经使用以下命令通过 npm 导入了它。
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>
我也试过在不使用 /es 的情况下导入它。
这是 console.log(即时搜索)
的输出
{__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
你能试试这样导入即时搜索吗:
import instantsearch from 'instantsearch.js/es';
import { searchBox } from 'instantsearch.js/es/widgets';
这样它将导入唯一需要的模块,它应该可以在 Angular2/Ionic 应用程序中使用。
如果您想详细了解如何将 instantsearch.js 集成到 Angular2/Ionic 应用程序中,您应该在此处阅读我们的集成指南:https://community.algolia.com/instantsearch.js/v2/guides/angular-integration.html
我们也在积极努力发布 angular-instansearch 库,这将在接下来的几个月内完成。如果您有兴趣加入测试计划,请填写此文件:https://docs.google.com/forms/u/2/d/e/1FAIpQLSeqEHS0VjnNlaKMp7Cm0y7pRe2pLz-39y3-cEAs5o-H0-HD6A/viewform?usp=send_form
使用这个导入:
import instantsearch from 'instantsearch.js/dist/instantsearch'
使用这个生命周期事件
ionViewWillEnter(){
const options = environment.algolia;
this.search = instantsearch(options);
this.search.start();
this.search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box',
placeholder: 'search for doctors',
// poweredBy: true
})
);
// initialize hits widget
this.search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates:{
empty: 'No results',
item:`
<strong> Result : {{_highlightResult.name.value}}
`
},
})
);
this.search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination',
maxPages: 2,
})
);
}
使用相同的 html。它对我有用
我正在尝试在我的 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 is not a function
我已经使用以下命令通过 npm 导入了它。
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>
我也试过在不使用 /es 的情况下导入它。
这是 console.log(即时搜索)
的输出{__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
你能试试这样导入即时搜索吗:
import instantsearch from 'instantsearch.js/es';
import { searchBox } from 'instantsearch.js/es/widgets';
这样它将导入唯一需要的模块,它应该可以在 Angular2/Ionic 应用程序中使用。
如果您想详细了解如何将 instantsearch.js 集成到 Angular2/Ionic 应用程序中,您应该在此处阅读我们的集成指南:https://community.algolia.com/instantsearch.js/v2/guides/angular-integration.html
我们也在积极努力发布 angular-instansearch 库,这将在接下来的几个月内完成。如果您有兴趣加入测试计划,请填写此文件:https://docs.google.com/forms/u/2/d/e/1FAIpQLSeqEHS0VjnNlaKMp7Cm0y7pRe2pLz-39y3-cEAs5o-H0-HD6A/viewform?usp=send_form
使用这个导入:
import instantsearch from 'instantsearch.js/dist/instantsearch'
使用这个生命周期事件
ionViewWillEnter(){
const options = environment.algolia;
this.search = instantsearch(options);
this.search.start();
this.search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box',
placeholder: 'search for doctors',
// poweredBy: true
})
);
// initialize hits widget
this.search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates:{
empty: 'No results',
item:`
<strong> Result : {{_highlightResult.name.value}}
`
},
})
);
this.search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination',
maxPages: 2,
})
);
}
使用相同的 html。它对我有用