typeahead.jsをAngular 2で使用する

Question

私はtypeahead.jsをAngular 2で使用しようとしています（Bloodhound機能を利用するには最高の方法です）。しかし、jsファイルをプロジェクトにインポートするのは難しいです。

私はindex.htmlの中に次き：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

と先行入力ファイル：

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.1.1/bloodhound.min.js"></script> 

私もjQueryのsystemjs.configに次のようにインポートした

：

.. 
map: { 
     'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js', 
}.. 

そして、私はngAfterViewInitメソッドでjQueryを持っています：

ngAfterViewInit() { 

      console.log("jQuery is ready"); 

      // constructs the suggestion engine 
      var states = new Bloodhound({ 
       datumTokenizer: Bloodhound.tokenizers.whitespace, 
       queryTokenizer: Bloodhound.tokenizers.whitespace, 
       // `states` is an array of state names defined in "The Basics" 
       local: states 
      }); 

      $('#bloodhound .typeahead').typeahead({ 
       hint: true, 
       highlight: true, 
       minLength: 1 
      }, 
       { 
        name: 'states', 
        source: states 
      }); 




    } 

jQueryが機能します（コンソールログエントリによって確認されます）。しかし、私は次のエラーを取得する：

jQuery.Deferred exception: $(...).typeahead is not a function TypeError: $(...).typeahead is not a function

と

ERROR TypeError: $(...).typeahead is not a function

Answer 1

ここに私のソリューションです。誰かがこれを助けることを願っています。

次のコマンドを使用してtypehead.jsタイプ定義をインストールします。

npm install --save @types/typeahead 

すぎアンギュラcli.jsonファイルに以下のファイルを追加します。

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

私もjQueryのをインストールしているコンポーネント

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 
    }); 

ののOnInit（）メソッドで次の操作を実行します。

import * as $ from 'jquery'; 

をapp.component.tsそして、あなたのコンポーネントファイルに次のようにインポートすることを確認するために以下を追加することを確認してください。

declare const Bloodhound; 
declare const $; 

代わりに$（ドキュメント）.readyと直接ngAfterViewInitでなしのコンポーネントのHTMLファイル

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