Algolia和角4
问题描述:
我想在这里学习本教程:https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/Algolia和角4
为了实现我的网站instantsearchjs。
一切都连接好的,我可以查询并在我的网站.JSON结果。
但我不understant如何渲染它,我不能把fonction的ngOnInit()外
这里是我的文件:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as firebase from 'firebase';
import * as algoliasearch from 'algoliasearch';
import * as instantsearch from 'instantsearch.js';
@Component({
selector: 'app-homepage',
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.css'],
})
export class HomepageComponent implements OnInit {
constructor(private router: Router) {
}
var search = instantsearch({
// Replace with your own values
appId: '4DJA9OYKC1',
apiKey: '12de76865a02a406ee95786c6f4a3cf3', // search only API key, no ADMIN key
indexName: 'events',
urlSync: true
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-input'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
hitsPerPage: 10,
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination'
})
);
ngOnInit() {
var client = algoliasearch('4DJA9OYKC1', '12de76865a02a406ee95786c6f4a3cf3');
var index = client.initIndex('events');
index.search('Ada', function(err, content) {
console.log(content.hits);
//console.log(err);
});
我认为它是功能相关的问题在TS内部,但我不知道如何在Angular中实现它。
Inside Oninit编译但在页面上的任何地方出错,在外面它不编译。
该示例中的init中的代码工作完美,并给我在网站控制台上的结果。
预先感谢社会各界的帮助下
答
要做到这一点,你应该使用,其中包括连接器,这有助于instantsearch.js控件创建自定义可与角使用的instantsearch.js 2.1版
// initialize custom hits widget
let customHits = connectHits(this.renderFn);
this.search.addWidget(
customHits({
subject: this.hitts
})
);
connectHits函数需要一个值,该值是自定义小部件的呈现函数。这个函数输出命中的值,然后插入到connectHits函数中来创建另一个作为小部件的函数。
渲染功能如下:
renderFn(HitsRenderingOptions) {
HitsRenderingOptions.widgetParams.subject.next(HitsRenderingOptions.hits);
}
所以在HTML页面窗口小部件的结果用作如下:
<!-- Hits List --->
<li *ngFor="let hit of hitts">
{{ hit }}
</li>
<!-- End Hits List --->
记得在customHits功能,我们赋予它的主题customHits函数对this.hitts变量的结果。
我希望这会有所帮助。
有人吗?只要我添加一个小部件,网站就停止工作。 –
我对Angular 4并不熟悉,但InstantSearch.js正在与DOM开展自己的业务。是否有可能两个库都试图修改混淆Angular的DOM的相同部分。有一件事可以帮助很多人在https://jsfiddle.net/上制作一个可重复的测试用例 – bobylito