将 Bloodhound 导入 Angular 2 CLI 项目答案

【问题标题】：Importing Bloodhound into Angular 2 CLI project将 Bloodhound 导入 Angular 2 CLI 项目
【发布时间】：2017-07-09 16:33:31
【问题描述】：

我正在尝试将 Bloodhound.js 实施到使用 Angular 2 CLI 的 Angular 2 项目中。目前我有 jQuery 通过以下方法工作：

npm install jquery --save
npm install @types/jquery --save-dev
然后将 '"../node_modules/jquery/dist/jquery.min.js"' 添加到 angular-cli.json 中的脚本数组中。

我对 angular-cli.json 中的 Bloodhound.js 也做了同样的事情：

"../node_modules/bloodhound-js/dist/bloodhound.min.js"

但是我收到以下错误：

找不到名字“猎犬”。

有没有办法直接导入.js文件或者在本地添加导入？

【问题讨论】：

你找到解决办法了吗

标签： jquery angular typeahead bloodhound

【解决方案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>

【讨论】：