需要在角度 2 中插入 Script 标签

问题描述

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

我们有意为您删除模板中的标签不应该使用它们按需加载代码.https://github.com/angular/angular/issues/4903 [2015]

但是 - 有一个函数 bypassSecurityTrustScript

我想知道何时以及如何使用 Angular 2 中的 bypassSecurityTrustScript?

我知道有人问过类似的问题:Angular2 动态插入脚本标签 - 尽管没有人回答他们关于如何使用 bypassSecurityTrustScript，我不确定该问题提供的答案如何工作，因为它似乎在模板中使用 JavaScript.

解决方案

在视图中使用脚本通常是一种不好的做法.如果你坚持这样做，你可以使用这个组件:

scripthack.component.html:

<ng-content></ng-content>

scripthack.component.ts:

import { Component, ElementRef, ViewChild, Input } from '@angular/core';@成分({选择器:'脚本黑客'，templateUrl: './scripthack.component.html'})导出类 ScriptHackComponent {@输入()源代码:字符串；@输入()类型:字符串；@ViewChild('script') 脚本:ElementRef;convertToScript() {var element = this.script.nativeElement;var script = document.createElement("script");script.type = this.type ?this.type:文本/javascript"；如果(this.src){script.src = this.src;}如果(元素.innerHTML){script.innerHTML = element.innerHTML;}var parent = element.parentElement;parent.parentElement.replaceChild(script, parent);}ngAfterViewInit() {this.convertToScript();}}

用法(内联):

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

用法(外部):

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

I've already done a bit of reading and searching and pretty much everything I find points to that a script tag cannot be included in a template in Angular 2.

However - there is a function bypassSecurityTrustScript

I'd like to know when and how bypassSecurityTrustScript in Angular 2 is intended to be used?

I know a similar question has been asked:Angular2 dynamically insert script tag - though no one answered their question of how to use bypassSecurityTrustScript, and I'm not sure how the provided answer to that question could even work as it appears to use JavaScript within a template.

解决方案

Having scripts in your views is usually a bad practice. If you insist on doing this you can use this component:

scripthack.component.html:

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

scripthack.component.ts:

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();
    }
}

usage (inline):

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

usage (external):

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

这篇关于需要在角度 2 中插入 Script 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！