阿尔戈利亚和角 4答案

【问题标题】：Algolia and angular 4阿尔戈利亚和角 4
【发布时间】：2017-11-17 01:19:21
【问题描述】：

我正在尝试在这里学习本教程：https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/

为了在我的网站中实现 Instantsearchjs。

一切都已链接好的，我可以从我的网站查询并得到 .JSON 的结果。

但我不明白如何渲染它，我不能把函数放在 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 中实现它。

在 Oninit 内部它可以编译，但页面上到处都是错误，而在它外部则无法编译。

示例中 init 中的 ng 代码完美运行，并在网站控制台上显示结果。

提前感谢社区的帮助

【问题讨论】：

有人吗？一旦我添加了一个小部件，网站就会停止工作。
我不熟悉 Angular 4，但 InstantSearch.js 正在使用 DOM 做自己的事情。有没有可能这两个库都试图修改 DOM 的同一部分，这使 Angular 感到困惑。有很大帮助的一件事是在 jsfiddle.net 上制作一个可重现的测试用例

标签： angular algolia

【解决方案1】：

为此，您应该使用 Instantsearch.js 版本 2.1，其中包含有助于创建可与 Angular 一起使用的自定义 Instantsearch.js 小部件的连接器

// 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 变量。

我希望这会有所帮助。

【讨论】：