如何在Angular项目中嵌入Playpass脚本并使其正常运行？

Angular的安全机制会过滤掉通过innerHTML或DomSanitizer插入的<script>标签，导致这类动态插入的脚本无法执行。要让Playpass的脚本正常运行，需要通过原生DOM API手动创建并插入脚本元素，具体步骤如下：

1. 编写组件代码 #

创建一个专门的组件来承载Playpass小部件，在组件类中动态加载脚本：

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-playpass-scheduler',
  template: `
    <div #widgetContainer class="playpass playpass-widget">
      <p>Schedule created with <a href="https://playpass.com/sports-software/football-schedule-maker">football scheduler</a> by Playpass</p>
    </div>
  `
})
export class PlaypassSchedulerComponent implements AfterViewInit {
  @ViewChild('widgetContainer') widgetContainer!: ElementRef;

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

  private loadPlaypassScript(): void {
    const script = document.createElement('script');
    script.src = 'https://playpass.com/widgets/R2wqxme.js';
    script.async = true;

    // 可选：脚本加载完成后执行初始化逻辑（如果Playpass需要）
    script.onload = () => {
      // 若脚本提供了全局初始化方法，可在此调用，例如：
      // window.playpassInit?.();
    };

    this.widgetContainer.nativeElement.appendChild(script);
  }
}

2. 关键原理说明 #

• 直接通过document.createElement('script')创建脚本元素，绕开Angular的安全过滤机制，浏览器会正常加载并执行该脚本。
• 使用@ViewChild获取目标容器的DOM引用，确保在视图初始化完成后（ngAfterViewInit钩子）再插入脚本，避免容器未渲染导致的错误。
• 脚本的async属性可保证脚本异步加载，不阻塞页面渲染。

3. 使用组件 #

在需要展示小部件的模块中引入该组件，然后在模板中直接使用：

<app-playpass-scheduler></app-playpass-scheduler>

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