如何在Angular组件的HTML文件中使用JavaScript？

根本原因 #

Angular 为了防范XSS注入攻击，默认安全策略会自动移除组件模板（对应HTML文件）内所有的<script>标签，因此直接写在模板中的脚本代码不会被加载执行。

解决方案 #

• 方案一：将逻辑迁移到组件TypeScript文件（最推荐）
  Angular 本身采用视图与逻辑分离的设计，原本写在script标签中的代码，直接放到对应组件.ts文件的合适生命周期钩子中执行即可。
  示例：需要在组件初始化后执行的逻辑写到ngOnInit钩子中

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-component',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.css']
})
export class CustomComponent implements OnInit {
  ngOnInit(): void {
    // 此处编写原本要放在script标签内的逻辑
    console.log('脚本逻辑正常执行');
    this.customMethod();
  }

  customMethod() {
    // 自定义业务逻辑
  }
}

• 方案二：动态创建script标签（仅用于必须加载第三方脚本的场景）
  如果确实需要引入外部第三方SDK等脚本，可以在组件TS文件中通过Renderer2动态创建script元素插入DOM。
  示例：

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

@Component({
  selector: 'app-custom-component',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.css']
})
export class CustomComponent implements OnInit {
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit(): void {
    const script = this.renderer.createElement('script');
    script.type = 'text/javascript';
    // 加载外部脚本时填写src属性
    script.src = '你的第三方脚本地址';
    // 写内联脚本时使用text属性
    // script.text = 'console.log("内联脚本执行")';
    this.renderer.appendChild(this.document.body, script);
  }
}

• 方案三：绕过安全检测（极度不推荐，仅用于本地测试）
  你可以使用DomSanitizer服务绕过Angular的默认安全校验，但该操作会大幅提升XSS攻击风险，绝对禁止在生产环境使用。

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