如何动态从 Angular 中的 HTML 中删除<script>

Question

我正在尝试将我的应用程序与第三方支付集成。他们提供了 JS 文件，我将其包含在 HTML 中。

var script = document.createElement("script");
    script.src = "URL"
    document.body.appendChild(script); 

每当用户选择执行某些特定操作时，我想删除现有文件并再次添加相同的 JS 文件。

我怎样才能实现这个目标？

Answer 1

如果您想在 Angular 应用程序中动态删除或再次添加脚本，您可以执行以下操作：

1。创建一个服务（也许是一个实用程序？）来处理脚本操作。

import { Injectable } from '@angular/core';

@Injectable({   providedIn: 'root' }) export class ScriptService {

  constructor() { }

  loadScript(src: string): void {
    // Remove existing script if present
    this.removeScript(src);

    // Create new script element
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);   }

  private removeScript(src: string): void {
    const scripts = document.querySelectorAll(`script[src="${src}"]`);
    scripts.forEach(script => script.remove());   } }

2。每当您需要在组件中重新加载脚本时，请调用此函数。

import { Component } from '@angular/core';
import { ScriptService } from './script.service'; // Adjust the path as necessary

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private scriptService: ScriptService) { }

  performAction() {
    const scriptUrl = 'URL'; // Replace 'URL' with the actual script URL

这可能对你有帮助：D