如何在Angular 2+中正确显示AngularJS内容？

我完全理解你在特殊场景下需要在Angular 2+应用里集成AngularJS内容的需求，之前你尝试的innerHTML加 sanitize 管道方案失效，主要有两个核心原因：

1. 动态插入的<script>标签不会自动执行：Angular的innerHTML只会渲染静态HTML结构，不会解析或执行其中的脚本代码，所以你嵌入的AngularJS库根本没被加载。
2. AngularJS不会自动初始化动态DOM：AngularJS在页面加载时会扫描DOM并自动启动ng-app对应的应用，但动态插入的内容不在初始扫描范围内，所以就算脚本加载了，AngularJS也不会识别你的ng-app指令。

下面是具体的解决步骤，亲测可行：

步骤1：手动加载AngularJS脚本并初始化 #

我们需要在Angular组件里主动加载AngularJS库，然后手动启动它的应用：

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

@Component({
  selector: 'app-root',
  template: `<div [innerHTML]="angularJSTemplate"></div>`
})
export class AppComponent implements OnInit {
  angularJSTemplate: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    // 准备AngularJS模板（去掉外层的html/body标签，因为已经在Angular应用内）
    this.angularJSTemplate = this.sanitizer.bypassSecurityTrustHtml(`
      <div id="angularjs-container" ng-app="">
        <p>Input something in the input box:</p>
        <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
        <h1>Hello {{name}}</h1>
      </div>
    `);

    // 检查AngularJS是否已加载，避免重复加载脚本
    if (!window['angular']) {
      const script = document.createElement('script');
      script.src = 'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js';
      script.onload = () => {
        // 脚本加载完成后，手动初始化AngularJS
        this.bootstrapAngularJS();
      };
      document.body.appendChild(script);
    } else {
      // 如果已加载，直接初始化
      this.bootstrapAngularJS();
    }
  }

  private bootstrapAngularJS(): void {
    // 等待Angular完成DOM更新，确保模板已插入到页面
    setTimeout(() => {
      const container = document.getElementById('angularjs-container');
      if (container) {
        // 手动启动AngularJS应用，传入依赖模块（这里是空数组表示默认模块）
        angular.bootstrap(container, []);
      }
    }, 0);
  }
}

步骤2：关键注意事项 #

• 安全风险：使用bypassSecurityTrustHtml会跳过Angular的安全检查，务必确保你的AngularJS模板内容是完全可信的，避免XSS攻击。
• 模块依赖：如果你的AngularJS代码依赖自定义模块，需要在angular.bootstrap时传入模块名，比如angular.bootstrap(container, ['myCustomAngularJSModule'])。
• 作用域隔离：给AngularJS的根容器设置唯一ID，避免和Angular应用的DOM元素冲突，确保精准初始化。
• 脚本加载优化：如果你的应用经常需要用到AngularJS，也可以直接在index.html里提前引入脚本，这样就不用每次动态创建了。

这样修改后，你的AngularJS内容就能在Angular 2+应用里正常运行，输入框的双向绑定也会生效。

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