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中的代码工作完美，并给我在网站控制台上的结果。

预先感谢社会各界的帮助下

来源

2017-06-29 Raphael ABADIE-MOREAU

有人吗？只要我添加一个小部件，网站就停止工作。 –

我对Angular 4并不熟悉，但InstantSearch.js正在与DOM开展自己的业务。是否有可能两个库都试图修改混淆Angular的DOM的相同部分。有一件事可以帮助很多人在https://jsfiddle.net/上制作一个可重复的测试用例 – bobylito

要做到这一点，你应该使用，其中包括连接器，这有助于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变量的结果。

我希望这会有所帮助。

来源

2017-09-11 19:03:33 BooToo

Algolia和角4

回答

相关问题