如何在Ionic Angular 6应用中集成使用外部widget组件

注意：Angular 自带模板安全防护机制，直接把官方给的HTML+Script代码贴到组件模板里不会生效，script标签会被编译阶段自动移除，按以下步骤接入即可：

步骤1：编写组件逻辑，动态加载Widget脚本 #

不要在模板里写script标签，在对应页面的组件类中，等视图初始化完成后动态插入脚本节点，同时做重复加载判断，避免重复引入资源。
以积分榜页面 standings.page.ts 为例，代码如下：

import { Component, AfterViewInit, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-standings',
  templateUrl: './standings.page.html',
  styleUrls: ['./standings.page.scss'],
})
export class StandingsPage implements AfterViewInit {
  // 替换成你自己的API Key、联赛ID、赛季、球队ID等参数
  widgetConfig = {
    apiKey: '你的实际API Key',
    league: '39', // 示例：39对应英超联赛
    season: '2024',
    team: '', // 留空显示整个联赛积分榜，填写球队ID则显示单球队数据
    theme: 'light' // 可选值light/dark，留空使用默认主题
  };

  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngAfterViewInit(): void {
    this.loadWidgetScript();
  }

  private loadWidgetScript(): void {
    // 判断脚本是否已经加载过，避免重复插入节点
    const existingScript = this.document.getElementById('api-football-widget-script');
    if (existingScript) {
      // 脚本已存在时，手动触发Widget重渲染即可
      if ((window as any).APISportsWidgets) {
        (window as any).APISportsWidgets.scan();
      }
      return;
    }

    // 动态创建script节点
    const scriptEl = this.renderer.createElement('script');
    scriptEl.id = 'api-football-widget-script';
    scriptEl.type = 'module';
    scriptEl.src = 'https://widgets.api-sports.io/2.0.3/widgets.js';
    scriptEl.onerror = () => {
      console.error('足球Widget脚本加载失败');
    };
    this.renderer.appendChild(this.document.body, scriptEl);
  }
}

步骤2：在组件模板中放置Widget容器 #

在对应页面的模板文件（比如standings.page.html）中加入Widget容器节点，通过Angular的属性绑定方式传入配置参数，不要硬写script标签：

<ion-header>
  <ion-toolbar>
    <ion-title>联赛积分榜</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Widget容器 -->
  <div 
    id="wg-api-football-standings"
    data-host="v3.football.api-sports.io"
    [attr.data-key]="widgetConfig.apiKey"
    [attr.data-league]="widgetConfig.league"
    [attr.data-team]="widgetConfig.team"
    [attr.data-season]="widgetConfig.season"
    [attr.data-theme]="widgetConfig.theme"
    data-show-errors="false"
    data-show-logos="true"
    class="wg_loader"
    style="width: 100%; min-height: 600px;"
  ></div>
</ion-content>

步骤3：配置内容安全策略（CSP）避免资源被拦截 #

如果是用Capacitor打包成移动端App，或者线上部署时出现资源加载报错，需要修改项目根目录下index.html的CSP meta标签，加入Widget相关的资源白名单：
找到<meta http-equiv="Content-Security-Policy">标签，在script-src、connect-src、img-src配置段中加入以下源：

https://v3.football.api-sports.io https://widgets.api-sports.io https://media.api-sports.io

示例配置片段：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://widgets.api-sports.io; img-src 'self' data: https://media.api-sports.io; connect-src 'self' https://v3.football.api-sports.io https://widgets.api-sports.io">

常见问题排查 #

• Widget不显示、控制台报跨域/CSP错误：优先检查CSP配置是否漏加了对应域名白名单
• 动态修改联赛/赛季参数后Widget不更新：参数修改完成后，手动调用(window as any).APISportsWidgets.scan()触发重新渲染即可
• 页面切换回Widget页时内容空白：在ionViewWillEnterIonic页面生命周期中调用上述scan方法，重新初始化Widget节点即可

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