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

}

＆＃34; material_select＆＃34;是插件的一个功能。 但在我的控制台中我会看到下一个： console screenshot

猜猜我不明白如何在这里导入jq插件。 我怎么能这样做？

Answer 1

尝试以下步骤。

1. npm install --save @types/jquery

在declare var $: JQueryStatic;之前的代码中

2. class然后您可以像以前一样使用jquery。

3. 扩展jquery接口。

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

4. 将($('select') as JQueryEx).material_select()添加到ngAfterViewInit()功能，并从ngOnInit()中移除代码。