javascript - Angular 2 外部 JS 库 Skycons

Question

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

typings.d.ts

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“partly-cloudy-day”

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

在开发人员工具中，我收到两个错误(Angular 编译期间没有错误):

jQuery.Deferred exception: skycons.add is not a function TypeError: skycons.add is not a function

Uncaught TypeError: skycons.add is not a function

软件版本:

Angular CLI:1.7.4节点:9.4.0操作系统:win32 x64 Angular :2.4.10

Answer 1

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

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