Javascript Angular2使用Skycons JS

我在Angular 2应用程序中执行时遇到问题。我已通过

npm I Skycons

安装了Skycons

打字。d.ts

declare module 'skycons'

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

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

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

以下是答案：

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

---

您好，您是否找到了在Angular应用程序中显示Skycons的解决方案？我也有同样的问题。@Hadh嗨，是的，我有，见下文

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

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

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