如何将jquery和mCustomScrollbar插件导入到Angular2组件

Question

我有一个将这些模块导入到我的angular2组件的问题。我使用AngularClass的angular2-webpack-starter。

我安装依赖条件与NPM：

npm install jquery --save 
npm install malihu-custom-scrollbar-plugin --save 

并安装分型：

typings install jquery --save --ambient 
typings install mcustomscrollbar --save --ambient 

，我想用它组成是这样的：

jQuery('.selector').mCustomScrollbar(); 

什么是最好的解决方案做到这一点？

我试图用这个解决方案：Whats the best way to use jquery widgets inside angular 2?

但它不工作，我得到了错误“ jQuery是没有定义”。

Answer 1

你需要在你的页面，包括jQuery和插件的地方：

Answer 2

你必须包括通过脚本标签的jQuery /插件，在您的index.html页。

假设你正在使用的打字稿可以参考jQuery的从组件这样的：

import {Component, ElementRef, OnInit} from 'angular2/core'; 

declare var jQuery:any; 
@Component({ 
    selector: 'jquery-integration', 
    templateUrl: './components/jquery-integration/jquery-integration.html' 
}) 
export class JqueryIntegration implements OnInit { 
    elementRef: ElementRef; 
    constructor(elementRef: ElementRef) { 
     this.elementRef = elementRef; 
    } 
    ngOnInit() { 
     jQuery(this.elementRef.nativeElement).mCustomScrollbar(); 
    } 
} 

此处了解详情：http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

Answer 3

使用
角：2.0.0
打字稿： 2.0.2
Angular-cli：1.0.0-beta.16
webpack：2.1.0-beta.22
节点：4.6
NPM：2.15.9

ANSWER
添加类型的src/tsconfig.json

SOLUTION

1. 获取所需的软件包
   npm install jquery malihu-custom-scrollbar-plugin --save
npm install @types/jquery @types/jquery-mousewheel @types/mcustomscrollbar --save-dev
   

2. 中加入插件，CSS和脚本角cli.json在你的根文件夹

   //angular-cli.json 
   "apps": [ 
       { 
        ..., 
        "styles": [ 
         ..., 
         "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" 
        ], 
        "scripts": [ 
         "../node_modules/jquery/dist/jquery.js", 
         "../node_modules/malihu-custom-scrollbar-plugin/node_modules/jquery-mousewheel/jquery.mousewheel.js", 
         "../node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js" 
        ], 
        ... 
       } 
   ] 
   

3. 添加类型的src/tsconfig。JSON

   //tsconfig.json 
   { 
       "compilerOptions": { 
        ..., 
        "typeRoots": [ 
         "../node_modules/@types/" 
        ], 
        "types": [ 
         "jquery","jquery-mousewheel","mCustomScrollbar" 
        ], 
        ... 
       } 
   } 
   

4. 使指令

   //scrollbar.directive.ts 
   import {Directive, ElementRef, OnInit} from '@angular/core'; 
   declare var $:any; //<-- let typescript compiler know your referencing a var that was already declared 
   
   @Directive({ 
       selector: 'scrollbar', 
       host: {'class':'mCustomScrollbar'}, //<-- Make sure you add the class 
   }) 
   export class ScrollbarDirective implements OnInit { 
       el: ElementRef; 
       constructor(el:ElementRef) { 
        this.el = el; 
       } 
       ngOnInit() { 
        //$(function(){ console.log('Hello'); }); <--TEST JQUERY 
        //check if your plugins are loading 
        //$().mousewheel) ? console.log('mousewheel loaded') : console.log('mousewheel not loaded'); 
        //$().mCustomScrollbar) ? console.log('mCustomScrollbar loaded') : console.log('mCustomScrollbar not loaded'); 
   
        $(this.el.nativeElement).mCustomScrollbar({ 
         autoHideScrollbar: false, 
         theme: "light", 
         advanced: { 
          updateOnContentResize: true 
         } 
       }); 
   

5. include指令在ngModule并在组件的应用模板

   //app.module.ts 
   import {ScrollbarDirective} from "./shared/UI/scrollbar.directive"; 
   import {AppComponent} from "./app.component"; 
   
   @NgModule({ 
   ... 
       declarations: [ 
        AppComponent, 
        ..., 
        ScrollbarDirective 
       ], 
   ... 
   }) 
   export class AppModule{} 
   

   ---

   //app.component.ts 
   @Component({ 
       selector: 'dashboard', 
       templateUrl: ` 
        <scrollbar> 
         <div *ngFor="let thing of things">thing</div><br/> 
        </scrollbar> 
       ` 
   })