Блог

Я пытаюсь интегрировать плагин jQuery в свой проект Angular CLI. Этот плагин НЕ является пакетом node. Это средство выбора календаря (файлы можно найти здесь)

Я добавил эти файлы в папку assets в папке src проекта и добавил пути (стили / скрипты) к файлу angular.json. По-прежнему ничего. У меня установлен jQuery в этом проекте, и я использовал плагины jquery для npm, и они отлично работают.

Может ли кто-нибудь, пожалуйста, загрузить пример 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>
  

this.calendarPicker.calendarPicker не является функцией

Эта ошибка возникает из-за того, что в вашей библиотеке нет определения типа для angular CLI. Переменная calendarPicker — это просто переменная, которую вы определяете, так как вы можете использовать библиотеку. Итак, сначала вам нужно установить 2 пакета, подобных этому

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

Загрузите нужную библиотеку и поместите файл в папку с ресурсами

Затем в разделе скрипты в architect => сборка файла angular.json вам нужно добавить путь к jquery lib. Пожалуйста, измените путь соответствующим образом с помощью вашего

 "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   "");
      }
    });
  }
}