如何在Angular中直接运行JS代码而非加载外部URL？

问题背景 #

之前通过ScriptService的loadJsScript方法可正常加载外部URL的JS文件，但尝试将传入的URL替换为直接的JS代码（如alert('Hello world');）时，出现Uncaught SyntaxError: expected expression, got '<'错误，需实现直接运行内联JS代码且无需依赖assets目录下的文件。

错误原因 #

原loadJsScript方法是给<script>元素设置src属性，当传入JS代码时，浏览器会将这段代码当作URL去请求，服务器返回的错误页面（含HTML标签）被浏览器当作JS解析，从而触发语法错误。

解决方案 #

修改ScriptService，新增专门执行内联JS代码的方法，直接将代码写入<script>元素的内容而非设置src属性。

修改后的代码 #

1. AppComponent 代码

import { Component, OnInit, Renderer2 } from "@angular/core";
import { ScriptService } from "@app/element-types/_services/script.service";

// 定义要执行的内联JS代码
const inlineScript = `
alert('Hello world');
// 可添加更多自定义逻辑
console.log('内联脚本执行完成');
`;

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    standalone: true
})
export class AppComponent implements OnInit {
    constructor(
        private renderer: Renderer2,
        private scriptService: ScriptService
    ) {}

    ngOnInit() {
        // 调用新增的内联脚本执行方法
        this.scriptService.runInlineScript(this.renderer, inlineScript);
    }
}

2. ScriptService 代码

import {Inject, Injectable, Renderer2} from "@angular/core";
import { DOCUMENT } from "@angular/common";

@Injectable({
    providedIn: 'root'
})
export class ScriptService {
    constructor( @Inject(DOCUMENT) private document: Document) {}

    // 保留原有的加载外部URL脚本方法
    public loadJsScript(renderer: Renderer2, src: string): HTMLScriptElement {
        const script = renderer.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        renderer.appendChild(this.document.body, script);
        return script;
    }

    // 新增执行内联JS代码的方法
    public runInlineScript(renderer: Renderer2, code: string): HTMLScriptElement {
        const script = renderer.createElement('script');
        script.type = 'text/javascript';
        // 将代码直接写入script元素内容
        script.textContent = code;
        renderer.appendChild(this.document.body, script);
        return script;
    }
}

可选：支持异步回调 #

如果需要在脚本执行完成后执行后续逻辑，可以将runInlineScript改为返回Promise：

public runInlineScript(renderer: Renderer2, code: string): Promise<void> {
    return new Promise((resolve) => {
        const script = renderer.createElement('script');
        script.type = 'text/javascript';
        script.textContent = code;
        // 脚本加载完成后触发回调
        script.onload = resolve;
        renderer.appendChild(this.document.body, script);
    });
}

在组件中使用异步方法：

ngOnInit() {
    this.scriptService.runInlineScript(this.renderer, inlineScript).then(() => {
        console.log('内联脚本执行完成，开始后续操作');
        // 这里添加脚本执行后的逻辑
    });
}

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