需要在angular 2中插入脚本标记

我已经做了一些阅读和搜索，我发现的几乎所有东西都表明，Angular 2中的模板中不能包含脚本标记

我们正在从模板中删除标记，目的是为了满足您的需要 不应该使用它们按需加载代码。 [2015]

然而，有一个功能

我想知道Angular 2中的

bypassSecurityTrustScript

打算何时以及如何使用

我知道有人问过类似的问题：

---

-虽然没有人回答他们关于如何使用

绕过安全信任脚本的问题，而且我也不确定这个问题的答案是如何工作的，因为它似乎在一个模板中使用JavaScript。
事实证明我对此的想法有点错误。我试图找到一种方法，通过使用标准的角度模板变量将脚本放入模板中。当Angular填充模板时，它会清除值，因此脚本标记将丢失

我终于在本文中获得了脚本标记：

这就给我留下了如下问题：

然后，我根据以下内容将逻辑移到component类中：
在视图中使用脚本通常是一种不好的做法。如果您坚持这样做，您可以使用此组件：

scripthack.component.html：

<div #script style.display="none">
  <ng-content></ng-content>
</div>

用法（内联）：

警报（'hoi'）；

用法（外部）：

我有一个类似的用例，我不知道HTML是否会包含脚本标记。由于HTML5不执行作为innerHTML分配一部分的脚本，因此我使用了一种稍微不同的方法。

这是插件系统的一部分，所以我需要能够根据需要添加html+脚本

资料来源：

import{Component，Input，AfterViewInit，ViewChild，Directive，ElementRef}来自'@angular/core'；
@指示({
/*tslint：禁用下一行：指令选择器*/
选择器：“动态指令”
})
导出类DynamicDirective{}
@组成部分({
模板：``
})
导出类DynamicComponent在ViewInit之后实现{
@Input（）主体：任意；
@ViewChild（DynamicDirective，{read:ElementRef}）dynamic:ElementRef；
构造函数（）{}
//从插件加载所有html，但删除脚本标记并单独附加它们，
//因为如果它们是innerHTML的一部分，html将不会执行它们
ngAfterViewInit（）：void{
const div=document.createElement（'div'）；
div.innerHTML=this.body；
常量scriptElements=[]；
const scriptNodes=div.queryselectoral（'script'）；
for（设i=0；i
根据Angle文档，元素是禁止的，不能在模板中使用。在模板中使用时忽略

在这里检查
 

使用以下方法解决您的问题。它通过在DOM中插入脚本标记来包含JQuery，但它可以用于您想要的任何标记或javascript库。如果愿意，您可以使用innerHTML属性自定义标记的内容。
正如答案所说，这不是角度问题，因此它也与
domsanizer
无关。您试图解决的实际问题是什么？为什么您认为需要在模板中包含脚本标记？那么何时、为什么以及如何使用bypassSecurityTrustScript？@jornsharpe-基本上是两个受信任的内部web项目，可以在不同版本上，但允许在它们之间注入元素。也许更简单的说法是，我可以在两个想要共享“组件”的站点之间建立约定和协议。我不希望使用iframe，尽管这可能是我唯一的选择。这是使用角度管道的方式，请提供。外部托管的信息可能会在没有警告的情况下消失。这很有帮助。但有一个问题是，在JS中，您经常使用“{”字符，angular在解析模板时会出错。ngNonBindable似乎是答案，但有一个问题是ngNonBindable不处理未替换的“{”字符。谢谢您的提醒。我还没有遇到过它（或者记不起来）。一个解决方案是使用一个单独的js文件。我使用它来包含没有ts定义的javascript，但我认为这是一个不好的做法：DWhy这被认为是不好的做法？动态加载脚本有时是唯一的选择，例如，如果我想在我的应用程序中使用Bing映射。这被认为是不好的做法se MVC框架用于分离逻辑（代码）和GUI元素，因此您可以用其他内容替换视图或代码。如果您查看组件中的脚本，您可以用Google Maps或OpenStreetView替换Bing Maps。您所讨论的情况是
import { Component, ElementRef, ViewChild, Input } from '@angular/core';

@Component({
    selector: 'script-hack',
    templateUrl: './scripthack.component.html'
})
export class ScriptHackComponent {

    @Input()
    src: string;

    @Input()
    type: string;

    @ViewChild('script') script: ElementRef;

    convertToScript() {
        var element = this.script.nativeElement;
        var script = document.createElement("script");
        script.type = this.type ? this.type : "text/javascript";
        if (this.src) {
            script.src = this.src;
        }
        if (element.innerHTML) {
            script.innerHTML = element.innerHTML;
        }
        var parent = element.parentElement;
        parent.parentElement.replaceChild(script, parent);
    }

    ngAfterViewInit() {
        this.convertToScript();
    }
}

<script-hack>alert('hoi');</script-hack>

<script-hack src="//platform.twitter.com/widgets.js" type="text/javascript"></script-hack>