Question

我正在开发离子（第4版）应用程序，并且想要实现自定义量规。

我正在使用的是$作为jquery，并且有一个jquery-gauge.min.js文件，其中包含gauge（）方法，该方法通常可以以HTML方式正常工作。（即样式，脚本和模板都在一个文件中index.html 并应用jquery）。

import {
  Component,
  ViewChild,
  ElementRef,
  AfterViewInit,
  OnInit
} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page implements OnInit {
  ngOnInit(): void {
    $('.gauge1').gauge({
      values: {
        0: '',
        10: '',
        20: '',
        30: '',
        40: '',
        50: '',
        60: '',
        70: '',
        80: 'Tier 1',
        90: 'Tier 2',
        100: 'Tier 3',
      },
      colors: {
        0: '#1aff1a',
        75.5: '#1aff1a',
        75.6: '#515e80',
        80: "#515e80",
        90: "#515e80",
      },
      angles: [
        180,
        360
      ],
      lineWidth: 10,
      arrowWidth: 0,
      arrowColor: '#ccc',
      value: 75.5
    });

    $('.gauge2').gauge({
      values: {
        0: '',
        10: '',
        20: '',
        30: '',
        40: '',
        50: '',
        60: '',
        70: '',
        80: 'Tier 1',
        90: 'Tier 2',
        100: 'Tier 3',
      },
      colors: {
        0: '#00cc00',
        85.5: '#00cc00',
        85.6: "#515e80",
        90: "#515e80",
      },
      angles: [
        180,
        360
      ],
      lineWidth: 10,
      arrowWidth: 0,
      arrowColor: '#ccc',
      value: 85.5
    });

    $('.gauge3').gauge({
      values: {
        0: '',
        10: '',
        20: '',
        30: '',
        40: '',
        50: '',
        60: '',
        70: '',
        80: 'Tier 1',
        90: 'Tier 2',
        100: 'Tier 3',
      },
      colors: {
        0: '#00b300',
        95.5: '#00b300',
        95.6: "#515e80",
      },
      angles: [
        180,
        360
      ],
      lineWidth: 10,
      arrowWidth: 0,
      arrowColor: '#ccc',
      value: 95.5
    });
  }
}

所以当我在ionic上实现它时，这里发生的事情是在第$('.gauge').gauge({...})行上抛出了错误

Property 'gauge' does not exist on type 'JQuery<HTMLElement>'

如何解决此错误？

我已将jquery-gauge.min.js添加到angular.json文件中的脚本中。

编辑

我对代码进行了一些更改，错误消失了。

import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } 
from '@angular/core';`

import * as $ from 'jquery';
import './jquery-gauge.min.js';`

declare global {
  interface JQuery {
    gauge(arg: any): JQuery;`
 }
}

@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
ionViewDidLoad(): void {
$('.gauge1').gauge({
  values: {
    0: '',
    10: '',
    20: '',
    30: '',
    40: '',
    50: '',
    60: '',
    70: '',
    80: 'Tier 1',
    90: 'Tier 2',
    100: 'Tier 3',
  },
  `colors: {
    0: '#1aff1a',
    75.5: '#1aff1a',
    75.6: '#515e80',
    80: "#515e80",
    90: "#515e80",
  },
  angles: [
    180,
    360
  ],
  lineWidth: 10,
  arrowWidth: 0,
  arrowColor: '#ccc',
  value: 75.5
  });
  $('.gauge2').gauge({
  values: {
    0: '',
    10: '',
    20: '',
    30: '',
    40: '',
    50: '',
    60: '',
    70: '',
    80: 'Tier 1',
    90: 'Tier 2',
    100: 'Tier 3',
  },
  colors: {
    0: '#00cc00',
    85.5: '#00cc00',
    85.6: "#515e80",
    90: "#515e80",
  },
  angles: [
    180,
    360
  ],
  lineWidth: 10,
  arrowWidth: 0,
  arrowColor: '#ccc',
  value: 85.5
  });

  $('.gauge3').gauge({
  values: {
    0: '',
    10: '',
    20: '',
    30: '',
    40: '',
    50: '',
    60: '',
    70: '',
    80: 'Tier 1',
    90: 'Tier 2',
    100: 'Tier 3',
  },
  colors: {
    0: '#00b300',
    95.5: '#00b300',
    95.6: "#515e80",
  },
  angles: [
    180,
    360
  ],
  lineWidth: 10,
  arrowWidth: 0,
  arrowColor: '#ccc',
  value: 95.5
  });
 }
}

但是，仍然没有任何内容显示在浏览器上。

看起来无法从jquery-gauge.min.js获取方法指标

Answer 1

可能是因为此功能是在加载具有仪表功能的javascript之前执行的。

尝试使用ngAfterViewChecked()生命周期钩子代替ngOnInit()。

Answer 2

在导入语句后添加

import {
  Component,
  ViewChild,
  ElementRef,
  AfterViewInit,
  OnInit
} from '@angular/core';
import * as $ from 'jquery';

declare interface JQuery<HTMLElement> {
 gauge(...args): any;
}
...

Answer 3

找到了解决方案。

使用jQuery('.gauge1').guage()代替$('.gauge1').guage()

尽管我是jQuery的新手，但我不知道插件在不同平台上的行为方式会有所不同（不知道其确切原因），但是，当我在Web应用程序的.js文件中使用插件时，通过使用$('.guage').gauge()进行工作，但是当我将其与离子型（或应该与.ts文件一起使用）一起使用时，则需要jQuery('.guage').guage()来代替。

如果有人可以解释为什么会这样。那也将不胜感激和有益。

谢谢。

我如何解决错误“ TS2339：类型'JQuery <htmlelement>'上不存在属性'gauge'。”

3 个答案: