javascript - Angular 2外部JS库Skycons

我在Angular 2应用程序中实现Skycons时遇到问题。我已经通过npm i skycons安装了Skycons。

打字

declare module 'skycons'

weather.component.ts（负责Skycons的部分）

import * as Skycons from 'skycons';
import * as jQuery from 'jquery';

ngOnInit() {
    this.todayDate();
    this.getWeather();
    this.findLocation(52.4069200, 16.9299300);

var skyconType = function (icon) {
  if (icon === 'rain')
    return Skycons.RAIN
  else if (icon === 'snow')
    return Skycons.SNOW
  else if (icon === 'sleet')
    return Skycons.SLEET
  else if (icon === 'hail')
    return Skycons.SLEET
  else if (icon === 'wind')
    return Skycons.WIND
  else if (icon === 'fog')
    return Skycons.FOG
  else if (icon === 'cloudy')
    return Skycons.CLOUDY
  else if (icon === 'partly-cloudy-day')
    return Skycons.PARTLY_CLOUDY_DAY
  else if (icon === 'partly-cloudy-night')
    return Skycons.PARTLY_CLOUDY_NIGHT
  else if (icon === 'clear-day')
    return Skycons.CLEAR_DAY
  else if (icon === 'clear-night')
    return Skycons.CLEAR_NIGHT

  return Skycons.CLOUDY
}

jQuery(function () {
  var skycons = new Skycons({ "color": "#111" })

  jQuery('.skycon canvas').each(function (i, elem) {
    skycons.add(elem, skyconType(elem.className))
  })


  skycons.play()
})


}

weather.component.html（负责Skycons的部分）

<div class="skycon">
          <canvas width="84" height="84" id="icon" class="{{   weather.currently.icon }}">{{  weather.currently.icon }}</canvas>
        </div>

{{ weather.currently.icon }}例如返回string“部分阴天”

这是我第一次在Angular应用程序中使用外部JS库。

在开发人员工具中，我遇到两个错误（在Angular编译期间没有错误）：


  jQuery.Deferred异常：skycons.add不是函数TypeError：skycons.add不是函数
  
  未捕获的TypeError：skycons.add不是函数


软件版本：

角CLI：1.7.4
节点：9.4.0
操作系统：win32 x64
角度：2.4.10

最佳答案

假设您的skycons文件夹位于node_modules文件夹中，请尝试使用以下内容在component.ts文件中声明Skycons对象。

const Skycons = require("skycons")(window);