我在将这些模块导入我的 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();
最好的解决方案是什么?
我尝试使用这个解决方案:在 angular 2 中使用 jquery 小部件的最佳方法是什么?
但这不起作用,我收到错误"jQuery 未定义"。
使用
角度:2.0.0
打字稿:2.0.2
角度-cli:1.0.0-beta.16
网络包:2.1.0-测试版.22
节点:4.6
NPM:2.15.9
答
将类型添加到 src/tsconfig.json
溶液
-
获取所需的包
npm install jquery malihu-custom-scrollbar-plugin --save
npm install @types/jquery @types/jquery-mousewheel @types/mcustomscrollbar --save-dev
-
将插件 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" ], ... } ]
-
将类型添加到 src/tsconfig.json
//tsconfig.json { "compilerOptions": { ..., "typeRoots": [ "../node_modules/@types/" ], "types": [ "jquery","jquery-mousewheel","mCustomScrollbar" ], ... } }
-
制定指令
//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 } });
-
在 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> ` })
在页面的某个位置包含JQuery和插件:
通过脚本标签在你的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