在通过 HTML 注入包含的 Angular 2/4 应用程序中运行 javascript 脚本答案

【问题标题】：Run javascript script in Angular 2/4 app included through HTML injection在通过 HTML 注入包含的 Angular 2/4 应用程序中运行 javascript 脚本
【发布时间】：2017-07-13 18:39:55
【问题描述】：

我在使用 Angular 4 中的脚本时遇到问题。让我解释一下：我正在构建一个 Angular 应用程序，该应用程序将包含在更大的 Web 应用程序中。所以我的应用程序只是这个更大的 Web 应用程序中的其他应用程序之一。在我的应用程序中，我需要包含一些代表此 Web 应用程序公共区域的 HTML 代码。它们将是应用程序的头部、页眉、菜单和页脚。我的应用程序将放置在剩余空间中。因此，我检索这些 HTML 代码，通过绕过清理将它们转换为 SafeValue，并通过使用某些 div 的 innerHTML 属性将它们包含在内。之后，我可以看到这些带有样式和所有内容的 HTML。

所以这是上下文。问题是这些 HTML 中的脚本无法运行。即使它们没有被删除（您可以检查页面的 HTML 并查看那里的脚本），它们也不会运行。我需要它们运行，因为它们需要执行一些重要的任务，例如用链接填充菜单、动画菜单扩展以及天知道还有什么。

我已经尝试使用文档 DOM 对象将这些 HTML 包含在 index.html 中，以替换我放入 index.html 中的 div 作为占位符，但我遇到了同样的问题：它呈现，但脚本不运行。有趣的是，如果我将未运行的脚本标记直接放在 index.html 中（硬编码，非动态），它会起作用。

因此，脚本将具有以下形式：

<script type="text/javascript" src="//some_external_source"></script>

只有一句话：我无法控制我收到的这些常见 HTML。我只是收到它们，并且为了 Web 应用程序的视觉识别而不得不使用它们。

抱歉，如果已经回答。几天来我一直在寻找答案，但仍然没有找到答案（虽然我确实找到了与 AngularJS 类似的东西），所以我发布了。

【问题讨论】：

标签： javascript angular html-injections

【解决方案1】：

这不是 Angular 2 打算解决此类问题的方式，如果您想将应用程序分成单独的部分，例如：内容、页眉、页脚，您可能应该查看命名的路由器插座或 transcludion。

但是，如果您想按照自己的方式进行操作，请执行以下操作：

@Component({.your metadata..})
export class SomeComponent{
constructor (private domSanitizer:DomSanitizer){
    this.domSanitizer.bypassSecurityTrustScript(yourScript);
}
}

【讨论】：