Angular 6-集成jQuery/JavaScript文件
我正在尝试将jQuery插件集成到Angular CLI项目中。此插件不是节点包。它是一个日历选择器(可以找到文件) 我已将这些文件添加到项目“src”文件夹中的资产文件夹中,并将路径(样式/脚本)添加到angular.json文件中。还是没什么。我在这个项目上安装了jQuery,并使用了NPMjQuery插件,它们工作得很好 有人能上传一个使用链接插件的Angular CLI示例吗 下面的示例仅返回错误“this.calendarPicker.calendarPicker不是函数” 我将非常感谢任何帮助 应用程序组件类型脚本Angular 6-集成jQuery/JavaScript文件,jquery,angular,jquery-plugins,angular-cli,Jquery,Angular,Jquery Plugins,Angular Cli,我正在尝试将jQuery插件集成到Angular CLI项目中。此插件不是节点包。它是一个日历选择器(可以找到文件) 我已将这些文件添加到项目“src”文件夹中的资产文件夹中,并将路径(样式/脚本)添加到angular.json文件中。还是没什么。我在这个项目上安装了jQuery,并使用了NPMjQuery插件,它们工作得很好 有人能上传一个使用链接插件的Angular CLI示例吗 下面的示例仅返回错误“this.calendarPicker.calendarPicker不是函数” 我将非常感
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-organiser-area',
templateUrl: './organiser-area.component.html',
styleUrls: ['./organiser-area.component.css']
})
export class OrganiserAreaComponent implements AfterViewInit {
@ViewChild('calendarPicker') picker: ElementRef;
calendarPicker: any;
constructor() { }
ngAfterViewInit() {
this.calendarPicker = $(this.picker.nativeElement);
const winWidth = $(window).width();
if (winWidth > 480) {
this.calendarPicker.calendarPicker({
monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
useWheel: true,
callbackDelay: 100,
years: 2,
months: 3,
days: 5,
showDayArrows: true,
callback: function(cal) {
$('#selectedDate').html('Selected date: ' + cal.currentDate);
}
});
} else {
this.calendarPicker.calendarPicker({
monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
useWheel: true,
callbackDelay: 100,
years: 1,
months: 3,
days: 3,
showDayArrows: true,
callback: function(cal) {
$('#selectedDate').html('Selected date: ' + cal.currentDate);
}
});
}
}
}
应用程序组件HTML
<main>
<div #calendarPicker class="calendarBox"><div id="calendar"></div></div>
</main>
此.calendarPicker.calendarPicker不是函数
出现此错误是因为库没有angular CLI的类型定义。变量calendarPicker就是您要清除的变量,因此如何使用该库。
所以首先你需要像这样安装2个软件包
npm install jquery --save
npm install @types/jquery --save
下载所需的库,并将文件放在资产文件夹中
然后在architect=>buildofangular.json文件的脚本部分,您需要为jquerylib添加路径。请根据需要更改路径
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
....
"styles": [
"src/assets/css/jquery.calendarPicker.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"src/assets/js/jquery.calendarPicker.js"
]
},
然后在tsconfig.app.json中添加以下内容
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["jquery"]
},
"exclude": ["test.ts", "**/*.spec.ts"]
}
最后将组件文件更改为
import {
AfterViewInit,
Component,
ElementRef,
OnInit,
ViewChild
} from "@angular/core";
@Component({
selector: "app-organiser-area",
templateUrl: "./organiser-area.component.html",
styleUrls: ["./organiser-area.component.css"]
})
export class OrganiserAreaComponent implements AfterViewInit {
@ViewChild("calendarPicker") picker: ElementRef;
calendarPicker: any;
constructor() {}
ngAfterViewInit() {
this.calendarPicker = $(this.picker.nativeElement);
const winWidth = $(window).width();
$("#calendar").calendarPicker({
monthNames: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
useWheel: true,
callbackDelay: 500,
years: 1,
months: 3,
days: 4,
showDayArrows: false,
callback: function(cal) {
$("#mydate").html(cal.currentDate + "");
}
});
}
}
嗨,Ngo你觉得你能上传一个这个工作的实时代码示例吗?