如何在Angular TypeScript中添加含data-autoload等属性的script标签

算力阿峰

2026-6-21

解决Angular中添加带自定义data属性的script标签报错问题

问题原因

你的代码存在两个关键错误：

语法格式错误：属性赋值语句的引号位置错位（如script.data-autoload" =""），正确的赋值格式应为属性名 = 值。
JavaScript命名限制：带连字符的属性名（如data-autoload）无法通过点语法直接赋值，因为连字符会被JS解析为减法运算符，触发语法报错。

正确实现方式

方法1：方括号语法访问属性

用方括号包裹带连字符的属性名，即可完成正确赋值：

let script = this._renderer2.createElement('script');
script.type = "application/javascript";
// 方括号语法支持带连字符的属性名
script['data-autoload'] = "";
script['data-origin'] = "";
script['data-callback'] = "";

this._renderer2.appendChild(this.document.body, script);

方法2：使用Renderer2的setAttribute方法（推荐）

Angular官方推荐用Renderer2提供的API操作DOM属性，这种方式更适配框架的变更检测与安全规范：

let script = this._renderer2.createElement('script');
this._renderer2.setAttribute(script, 'type', 'application/javascript');
this._renderer2.setAttribute(script, 'data-autoload', '');
this._renderer2.setAttribute(script, 'data-origin', '');
this._renderer2.setAttribute(script, 'data-callback', '');

this._renderer2.appendChild(this.document.body, script);