Angular 2项目集成Skycons外部JS库遇到问题求助

Hey there! Let's troubleshoot and fix your Skycons integration in Angular 2. Based on what you've shared, here are the most common issues and step-by-step solutions to get it working:

1. Fix the Typings Declaration #

Your basic declare module 'skycons' might not give TypeScript enough context about the library's structure. Update your typings.d.ts with a more detailed declaration to enable proper type checking and autocomplete:

// src/typings.d.ts
declare module 'skycons' {
  export type IconType = 'clear-day' | 'clear-night' | 'partly-cloudy-day' | 'partly-cloudy-night' | 'cloudy' | 'rain' | 'sleet' | 'snow' | 'wind' | 'fog';
  
  export class Skycons {
    static CLEAR_DAY: IconType;
    static CLEAR_NIGHT: IconType;
    static PARTLY_CLOUDY_DAY: IconType;
    static PARTLY_CLOUDY_NIGHT: IconType;
    static CLOUDY: IconType;
    static RAIN: IconType;
    static SLEET: IconType;
    static SNOW: IconType;
    static WIND: IconType;
    static FOG: IconType;

    constructor(options?: { color?: string; resizeClear?: boolean });
    add(canvas: HTMLElement | string, icon: IconType): void;
    set(canvas: HTMLElement | string, icon: IconType): void;
    remove(canvas: HTMLElement | string): void;
    play(): void;
    pause(): void;
  }

  export default Skycons;
}

2. Correct Component Usage (Ditch jQuery for Angular-native Practices) #

Angular works best with native DOM access instead of jQuery. Here's how to adjust your weather.component.ts to properly initialize and use Skycons:

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import * as Skycons from 'skycons';

@Component({
  selector: 'app-weather',
  // Add a canvas element to your template (adjust size as needed)
  template: `<canvas #weatherIcon width="128" height="128"></canvas>`
})
export class WeatherComponent implements OnInit {
  // Use ViewChild to grab the canvas element from the template
  @ViewChild('weatherIcon') weatherIcon!: ElementRef<HTMLCanvasElement>;
  private skyconsInstance!: Skycons.Skycons;

  ngOnInit() {
    this.todayDate();
    this.getWeather();
    this.findLocation(52.4069200, 16.9299300);
    
    // Initialize Skycons with optional config (e.g., custom color)
    this.skyconsInstance = new Skycons({ color: '#2d3748' });
    
    // Example: Set an icon once you retrieve your weather data
    const fetchedWeatherIcon = 'rain'; // Replace with your actual API icon value
    this.skyconsInstance.set(this.weatherIcon.nativeElement, this.skyconType(fetchedWeatherIcon));
    
    // Start the icon animation
    this.skyconsInstance.play();
  }

  skyconType(icon: string): Skycons.IconType {
    switch(icon) {
      case 'rain': return Skycons.RAIN;
      case 'snow': return Skycons.SNOW;
      case 'clear-day': return Skycons.CLEAR_DAY;
      case 'clear-night': return Skycons.CLEAR_NIGHT;
      case 'cloudy': return Skycons.CLOUDY;
      // Add all other icon mappings your API returns
      default: return Skycons.CLOUDY;
    }
  }

  // Your existing methods: todayDate(), getWeather(), findLocation()...
}

3. Quick Error Checks #

• Ensure typings.d.ts is included in your tsconfig.json so TypeScript picks it up:

  // tsconfig.json
  {
    "include": [
      "src/**/*.ts",
      "src/typings.d.ts"
    ]
  }
  

• Double-check you installed the correct package: run npm install skycons --save (make sure it's the lowercase skycons package, not a fork with a similar name).
• Restart your Angular dev server after updating typings—sometimes the compiler needs a refresh to recognize new type declarations.

内容的提问来源于stack exchange，提问作者Artur