jquery - 如何将 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

使用
Angular：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

回答
将类型添加到 src/tsconfig.json

解决方案

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

2. 将插件 css 和脚本添加到根文件夹中的 angular-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. 在 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>
       `
   })
   

Answer 2

您需要在页面中的某处包含 JQuery 和插件：

Answer 3

您必须在 index.html 页面中通过脚本标签包含 jquery/plugin。

假设您使用的是 TypeScript，您可以从组件中引用 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