- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我在将这些模块导入我的 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 is not defined”。
最佳答案
使用
Angular :2.0.0
typescript :2.0.2
Angular -cli: 1.0.0-beta.16
网络包:2.1.0-beta.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 - 如何将 jquery 和 mCustomScrollbar 插件导入 Angular2 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36755625/
我正在尝试根据窗口的宽度初始化和销毁 mCustomScrollBar 滚动条插件(es6 应用程序中的一些 jquery,使用 webpack/babel 进行遍历)。但是,在调整窗口大小时出现
我有带有 reCaptcha 的联系表单并使用 jQuery mCustomScrollbar 插件。 问题:当我单击/聚焦 reCaptcha 字段时,页面自动滚动到 div 顶部。 参见Demo
我正在使用 mCustomScrollbar ,我想知道我的滚动条位置是否在使用 jquery 的底部。这怎么可能?我可以在 jquery 中使用普通的底部检查用法还是 mCustomScrollba
我有一个 div .在这个 div 中,我动态添加了一个 ul 元素 $("#MetricsTypeYearModelList").append(''); 在此之后,我将遍历一个 JSON 对象并将
http://jsfiddle.net/3LQJG/2/ 上面是演示问题的 JSFiddle。我在 x 方向上有 overflow 的内容容器的父级调用 mCustomScrollbar。 但是,您会
我正在使用 mCustomScrollbar,并且我正在尝试动态加载滚动条顶部和底部的内容(当然,不是同时加载)。 http://manos.malihu.gr/jquery-custom-conte
我已经在这里看到了有关如何执行此操作的答案,但我就是无法让它发挥作用。也许另一双眼睛会有所帮助。我试图让滚动条出现在单击图像时弹出的 div 中。这是代码: ('modalcs'是弹出的div的名称)
Here is my fiddle (function($){ $(window).load(function(){ $(".sections").mCustomScrollb
我目前正在使用 mcustomscrollbar,它是一个 jquery 免费插件。有没有可能让这个插件始终显示滚动条? 最佳答案 您可能意味着您希望滚动条始终可见,即使可滚动区域的内容小于容器的视口
我正在使用jQuery custom content scroller在 div 元素上创建自定义滚动条。当在 div 内部滚动并到达 div 的底端时,页面将开始滚动。有没有办法阻止滚动事件传播?
使用mCustomScrollbar在 jQuery UI 对话框上。 如果我按照 mCsutomScrollbar 说明中的建议在 $(window).load 上启动 mCsutomScrollb
我正在使用 http://manos.malihu.gr/jquery-custom-content-scroller/ 中的自定义滚动条. 我在包含 gridview 的 div 上使用它。当向 G
我有一个带有下拉列表的表单。这个列表是动态生成的,我使用 mCustomScrollbar 来显示下拉列表中的元素。 mCustomScrollbar 需要以像素为单位固定高度。
这里是问题所在:我将 mCustomScrollbar 与一个 div 一起使用,其上的数据是从另一个 html 文件中动态加载的。 Javascript: function updateScroll
HTML "..." "..."
我有很多问题,希望您能帮助我回答这些问题。我花了几个小时试图自己解决所有问题,但无法解决问题。 我的问题是,当我检查 Google Chrome 中的元素并尝试向脚本添加新的代码块时,如下所示: $(
这完整了我的代码在 jsfiddle .在我通过 jquery 添加新列表元素后,我使用更新滚动条更新新列表但新列表溢出标签 ul 存储它。 此代码用于动态创建列表元素(jsfiddle 中的第 46
三天以来我非常沮丧。没有人能解决这个问题,我明天有一个演示...对于水平滚动、firefox chrome、平板电脑来说一切都很好...但是任何内容的垂直滚动都很奇怪,运行一点然后停止。而且我必须等待
如何申请mCustomScrollbar至 SCEditor ? This到目前为止我已经尝试过: HTML Apply scrollbar JS $("#editor").sceditor({
在我的 html 中,我尝试通过 ajax 调用更新购物车数据。在 HTML 中 以及内部脚本 $(document).ready(function(){ jQuery.get("/show_h
我是一名优秀的程序员,十分优秀!