有人能告诉我,如何在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,但我希望有一种更干净的方式来做到这一点。
当前回答
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
}
});
}
}
这对我很有用。
其他回答
安装jquery
jquery . jquery . Terminal$ npm
(bootstrap 4…)
终端$ npm安装popper.js
终端$ npm安装引导
然后将import语句添加到app.module.ts中。
import 'jquery'
(bootstrap 4…)
import 'popper.js'
import 'bootstrap'
现在您将不再需要<SCRIPT>标记来引用JavaScript。
(任何你想要使用的CSS仍然必须在styles.css中引用)
@import "~bootstrap/dist/css/bootstrap.min.css";
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;";
}
第一步:使用命令:NPM install jquery——save
步骤2:你可以简单地导入angular:
从jquery中导入$;
就这些。
一个例子是:
import { Component } from '@angular/core';
import $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(){
console.log($('body'));
}
}
只写
declare var $:any;
在所有导入部分之后,你可以使用jQuery并在index.html页面中包含jQuery库
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
这对我很有效