有人能告诉我,如何在Angular中使用jQuery吗?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
我知道有一些变通办法,比如在前面操纵DOM元素的类或id,但我希望有一种更干净的方式来做到这一点。
有人能告诉我,如何在Angular中使用jQuery吗?
class MyComponent {
constructor() {
// how to query the DOM element from here?
}
}
我知道有一些变通办法,比如在前面操纵DOM元素的类或id,但我希望有一种更干净的方式来做到这一点。
当前回答
你可以实现生命周期钩子ngAfterViewInit()来添加一些DOM操作
ngAfterViewInit() {
var el:any = elelemtRef.domElement.children[0];
$(el).chosen().on('change', (e, args) => {
_this.selectedValue = args.selected;
});
}
使用路由器时要小心,因为angular2可能会回收视图。所以你必须确保DOM元素的操作只在afterViewInit的第一次调用中完成。(你可以使用静态布尔变量来实现)
class Component {
let static chosenInitialized : boolean = false;
ngAfterViewInit() {
if (!Component.chosenInitialized) {
var el:any = elelemtRef.domElement.children[0];
$(el).chosen().on('change', (e, args) => {
_this.selectedValue = args.selected;
});
Component.chosenInitialized = true;
}
}
}
其他回答
全球库安装作为正式文档在这里
从npm安装: NPM安装jquery 在脚本中添加所需的脚本文件: “脚本”:( “node_modules / jquery / dist / jquery.slim.js” ),
重启服务器,如果你正在运行它,它应该工作在你的应用程序。
如果你想使用内部单个组件使用import $ from 'jquery';在组件内部
1)在组件中访问DOM。
import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
this.el = el.nativeElement;
this.dom = new BrowserDomAdapter();
}
ngOnInit() {
this.dom.setValue(this.el,"Adding some content from ngOnInit");
}
你可以通过以下方式来包含jQuery。 2)在angular2加载之前将jquery文件包含在index.html中
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- jquery file -->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
你可以使用Jquery在以下方式,这里我使用Jquery Ui日期选择器。
import { Directive, ElementRef} from '@angular/core';
declare var $:any;
@Directive({
selector: '[uiDatePicker]',
})
export class UiDatePickerDirective {
private el: HTMLElement;
constructor(el: ElementRef) {
this.el = el.nativeElement;
}
ngOnInit() {
$(this.el).datepicker({
onSelect: function(dateText:string) {
//do something on select
}
});
}
}
这对我很有用。
一个简单的方法:
1. 包括脚本
index . html
<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
2. 声明
my.component.ts
declare var $: any;
3.使用
@Component({
selector: 'home',
templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
...
$("#myselector").style="display: none;";
}
请遵循这些简单的步骤。这对我很管用。为了避免混淆,让我们从一个新的angular 2应用开始。我使用的是Angular cli。因此,如果您还没有安装它,请安装它。 https://cli.angular.io/
步骤1:创建一个演示angular 2应用程序
ng new jquery-demo
您可以使用任何名称。现在通过在cmd下运行检查它是否正在工作。(现在,如果不使用cd命令,请确保您指向'jquery-demo')
ng serve
你会在浏览器上看到“app works!”
步骤2:安装Bower (web包管理器)
在cli下运行这个命令(如果不使用cd命令,请确保你指向的是'jquery-demo'):
npm i -g bower --save
现在在成功安装凉亭后,创建一个“凉亭”。Json文件,使用以下命令:
bower init
它会要求输入,如果你想要默认值,只需要按enter键,最后输入“Yes”,当它会问“看起来不错吗?”
现在你可以在"jquery-demo"文件夹中看到一个新文件(bower.json)。你可以在https://bower.io/上找到更多信息
步骤3:安装jquery
执行此命令
bower install jquery --save
它将创建一个新文件夹(bower_components),其中包含jquery安装文件夹。现在你已经在“bower_components”文件夹中安装了jquery。
第四步:在angular-cli中添加jquery location。json的文件
“angular-cli开放。Json文件(目前在'jquery-demo'文件夹),并在“脚本”中添加jquery位置。它看起来是这样的:
"scripts": ["../bower_components/jquery/dist/jquery.min.js"
]
步骤5:编写简单的jquery代码进行测试
打开'app.component.html'文件,并添加一个简单的代码行,该文件看起来像这样:
<h1>
{{title}}
</h1>
<p>If you click on me, I will disappear.</p>
现在打开'app.component.ts'文件,并添加jquery变量声明和'p'标签的代码。你也应该使用生命周期钩子ngAfterViewInit()。修改后的文件看起来是这样的:
import { Component, AfterViewInit } from '@angular/core';
declare var $:any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
ngAfterViewInit(){
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
}
}
现在使用'ng serve'命令运行你的angular 2应用并测试它。它应该会起作用。
我发现的最有效的方法是在页面/组件构造函数中使用时间为0的setTimeout。这会让jQuery在Angular加载完所有子组件后的下一个执行周期中运行。其他一些组件方法也可以使用,但我所尝试的最好的工作时运行在一个setTimeout。
export class HomePage {
constructor() {
setTimeout(() => {
// run jQuery stuff here
}, 0);
}
}