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 }}返回示例＆＃34; partly-cloudy-day＆＃34;

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

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

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

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

软件版本：

Angular CLI: 1.7.4
Node: 9.4.0
OS: win32 x64
Angular: 2.4.10

如果您需要我发布更多代码，请询问。

Answer 1

这是一个答案：

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

 $(document).ready(function () {
  const 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.HAIL; }
    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 'cloudy';
  };
  $(function () {
    let skycons = new Skycons({ 'color': '#3C4858' });
    $('.skycon canvas').each(function (i, elem) {
      skycons.add(elem, skyconType(elem.className));
    });
    skycons.play();
  });
});

Angular2使用Skycons JS

1 个答案: