將Bloodhound導入Angular 2 CLI項目

Question

我正在嘗試將Bloodhound.js實現到使用Angular 2 CLI的Angular 2項目中。 目前我讓jQuery通過以下方法工作：

1. npm install jquery --save

2. npm install @ types / jquery --save-dev

3. 然后將'“../node_modules/jquery/dist/jquery.min.js”添加到angular-cli.json中的scripts數組中。

我對angular-cli.json中的Bloodhound.js做了同樣的事情，並且如下：

“../node_modules/bloodhound-js/dist/bloodhound.min.js”

但是我收到以下錯誤：

找不到名字'Bloodhound'。

有沒有辦法直接導入.js文件或在本地添加導入？

Answer 1

這是我的解決方案。 希望有人可以幫助這個。

使用以下命令安裝typehead.js類型定義。

npm install --save @types/typeahead

將以下文件添加到angular-cli.json文件中。

"assets/js/bloodhound.min.js",
"assets/js/typeahead.bundle.min.js"

在組件的OnInit（）方法中執行以下操作

const suggestions = [{
          value: 'string1'
        }, {
          value: 'string2'
        }, {
          value: 'string3'
        }, {
          value: 'string4'
        }, {
          value: 'string5'
        }];

 let bloodhoundSuggestions = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        sufficient: 3,
        local: this.suggestions
 });

 $('#tagsInput .typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    }, {
        name: 'suggestions',
        displayKey: 'value',
        source: bloodhoundSuggestions
  });

我也安裝了jQuery。

請務必在app.component.ts中添加以下內容

import * as $ from 'jquery';

並確保在組件文件中導入以下內容。

declare const Bloodhound;
declare const $;

組件Html文件

<div id="tagsInput">
   <input class="typeahead" type="text" placeholder="States of USA">
</div>