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

回答

相關問題