Question

我在Angular 2应用中实现Skycons时遇到问题。我已经通过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＆＃34;部分阴天＆＃34;

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

在Developer Tools中，我遇到两个错误（Angular编译期间没有错误）：

jQuery.Deferred异常：skycons.add不是函数TypeError：skycons.add不是函数

未捕获的TypeError：skycons.add不是函数

软件版本：

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

Angular 2外部JS库Skycons

1 个答案: