Angular页面中app.component.html内JavaScript代码无法执行的问题及执行方法咨询

兄弟，首先得说清楚：Angular 出于安全考虑，会自动过滤掉组件模板里的 <script> 标签——这是为了防止跨站脚本攻击（XSS），所以你写的那段代码直接被忽略了，控制台当然没输出。

不过你既然想知道怎么在Angular页面里执行JS代码，我给你几种可行的方式，按推荐程度排序：

1. 把代码放在组件类里（最推荐，Angular标准玩法） #

这才是Angular设计的正确姿势——业务逻辑都放在组件的TypeScript文件里，而不是模板。比如在app.component.ts里：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 组件初始化时自动执行
  ngOnInit(): void {
    console.log('testing console');
  }

  // 如果是响应用户操作（比如点击）
  runOnClick() {
    console.log('用户点击后执行的代码');
  }
}

如果要绑定到模板的事件，比如按钮点击，就在app.component.html里写：

<button (click)="runOnClick()">点我执行代码</button>

2. 动态创建<script>标签（适合加载外部脚本） #

要是你需要加载外部JS文件，或者必须用<script>标签的场景，可以在组件类里动态创建并插入DOM：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  // 等DOM渲染完成后执行
  ngAfterViewInit(): void {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    
    // 两种选择：写内联代码，或者加载外部文件
    // 内联代码示例
    script.textContent = `console.log('testing console from dynamic script')`;
    // 加载外部脚本的话就用下面这句替换上面的textContent
    // script.src = 'https://your-domain.com/script.js';
    
    document.body.appendChild(script);
  }
}

用AfterViewInit钩子是为了确保页面DOM已经准备好，再插入脚本不会出问题。

3. 用DomSanitizer绕过安全检查（不推荐，谨慎用！） #

如果你非要在模板里写内联脚本，也可以用DomSanitizer把内容标记为“安全”，但这会关掉Angular的XSS防护，只在你完全信任这段内容的情况下用：

首先在组件类里注入DomSanitizer：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

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

  constructor(private sanitizer: DomSanitizer) {
    // 把脚本内容标记为安全HTML
    this.safeScript = this.sanitizer.bypassSecurityTrustHtml(
      `<script type="text/javascript">console.log('testing console from sanitized html');</script>`
    );
  }
}

然后在模板里用[innerHTML]绑定这个变量：

<div [innerHTML]="safeScript"></div>

⚠️ 再次提醒：这种方法有安全风险，如果内容来自用户输入或者不可信的第三方，很容易被注入恶意代码，能不用就不用。

总的来说，优先用第一种方法，符合Angular的设计理念；第二种适合外部脚本；第三种是不得已的备选方案。

内容的提问来源于stack exchange，提问作者blue-sky