将 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 中的脚本数组。

我已经为Bloodhound做了同样的事情.js在angular-cli.json中，以及以下内容：

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

但是我收到以下错误：

找不到"寻血猎犬"这个名字。

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

Answer 1

这是我的解决方案。希望有人能帮忙。

使用以下命令安装类型头.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>