Angular 6 - 集成 jQuery/JavaScript 文件

Posted 2023-05-09

【中文标题】Angular 6 - 集成 jQuery/JavaScript 文件

【英文标题】：Angular 6 - Integrating jQuery/JavaScript files

【发布时间】：2019-08-27 21:33:58

【问题描述】：

我正在尝试将 jQuery 插件集成到我的 Angular CLI 项目中。这个插件不是一个节点包。这是一个日历选择器（文件可以在here找到）

我已将这些文件添加到项目的“src”文件夹中的资产文件夹中，并将路径（样式/脚本）添加到 angular.json 文件中。依然没有。我在这个项目上安装了 jQuery，并使用了 npm jquery 插件，它们工作正常。

有人可以上传一个使用链接插件的 Angular CLI 示例吗？

下面的例子只是返回'this.calendarPicker.calendarPicker is not a function'的错误

如果能提供任何帮助，我将不胜感激。

应用组件打字稿

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>

【参考方案1】：

this.calendarPicker.calendarPicker 不是函数

您遇到此错误是因为您的库没有 Angular CLI 的类型定义。变量 calendarPicker 只是您取消清除的变量，因此您如何使用该库。 所以首先你需要像这样安装2个包

npm install jquery --save
npm install @types/jquery --save

下载您需要的库并将文件放入您的资产文件夹中

然后在架构师 => 构建 angular.json 文件的脚本部分中，您需要为 jquery 库添加路径。请用您的

相应地更改路径

"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，你认为你可以上传这个工作的实时代码示例吗？