TypeScript和JQ插件（Angular4）

Question

我嘗試在Angular 4項目的組件中使用JQ插件。 這裏是我的代碼

import { Component, OnInit } from '@angular/core'; 
import * as $ from "../../../node_modules/jquery/dist/jquery.min.js"; 
import "../../../node_modules/materialize-css/dist/js/materialize.min.js"; 

@Component({ 
selector: 'app-table', 
templateUrl: './table.component.html', 
styleUrls: ['./table.component.css'] 
}) 
export class TableComponent implements OnInit { 

constructor() { } 

ngOnInit() { 

    $(document).ready(function() { 
    $('select').material_select(); 
    }); 
} 

} 

「material_select」是從插件的功能。 但在我的控制檯，我看到下一個： console screenshot

猜猜我不明白如何導入jq插件在這裏。 我該怎麼做？

Answer 1

請嘗試以下步驟。

1. npm install --save @types/jquery

2. 在你的代碼declare var $: JQueryStatic;前class然後你就可以像以前一樣的jQuery使用。

3. 擴展jquery接口。

   interface JQueryEx extend JQuery { 
       material_select(): any; 
   } 
   

4. 添加($('select') as JQueryEx).material_select()到ngAfterViewInit()功能和從ngOnInit()刪除代碼。