需要插入的角度2

Question

腳本標籤我已經做了一些閱讀和搜索和幾乎所有我找點到腳本標籤不能被包含在角2

模板我們正在有意地從模板中刪除標籤，因爲您不應該使用這些按需加載代碼的 。 https://github.com/angular/angular/issues/4903 [2015年]

然而 - 有一個函數bypassSecurityTrustScript

我想知道何時以及如何在角2 bypassSecurityTrustScript打算使用？

我知道了類似的問題已經被問： Angular2 dynamically insert script tag - 儘管沒有人回答了他們如何使用bypassSecurityTrustScript的問題，我不知道怎麼樣，因爲它似乎使用JavaScript提供這個問題的答案可能連工作在模板內。

Answer 1

原來我在想這有點不對。我試圖找到一種方法，通過使用標準的Angular模板變量將腳本放入模板中。當Angular填充模板時，它將清理這些值，並因此腳本標記丟失。

我設法最終得到了腳本標記本文以下內容： https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90#.7njysc6z1

這則給我留下了所描述的問題：Angular2 dynamically insert script tag

我然後轉移邏輯到組件類在此基礎上： Where does DOM manipulation belong in Angular 2?

Answer 2

在你的視圖中有腳本通常是一種不好的做法。如果你堅持這樣做，你可以使用這個組件：

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

使用（在線）：

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

用法（外部）：

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

Answer 3

我有一個類似的用例，我不知道HTML是否包含腳本標記。由於HTML5並不執行腳本，如果它是innerHTML分配的一部分，我使用了一種稍微不同的方法。
這是插件系統的一部分，所以我需要能夠按需添加html +腳本。這裏

來源 - https://github.com/savantly-net/sprout-platform/blob/development/web/sprout-web-ui/src/app/dynamic/dynamic.component.ts

import { Component, Input, AfterViewInit, ViewChild, Directive, ElementRef } from '@angular/core'; 

@Directive({ 
    /* tslint:disable-next-line:directive-selector */ 
    selector: 'dynamic-directive' 
}) 
export class DynamicDirective {} 

@Component({ 
    template: `<dynamic-directive></dynamic-directive>` 
}) 
export class DynamicComponent implements AfterViewInit { 
    @Input() body: any; 
    @ViewChild(DynamicDirective, {read: ElementRef}) dynamic: ElementRef; 

    constructor() { } 

    // loads all the html from the plugin, but removes the script tags and appends them individually, 
    // since html will not execute them if they are part of the innerHTML 
    ngAfterViewInit(): void { 
    const div = document.createElement('div'); 
    div.innerHTML = this.body; 
    const scriptElements = []; 
    const scriptNodes = div.querySelectorAll('script'); 
    for (let i = 0; i < scriptNodes.length; i++) { 
     const scriptNode = scriptNodes[i]; 
     // Create a new script element so HTML5 will execute it upon adding to DOM 
     const scriptElement = document.createElement('script'); 
     // Copy all the attributes from the original script element 
     for (let aI = 0; aI < scriptNode.attributes.length; aI++) { 
     scriptElement.attributes.setNamedItem(<Attr>scriptNode.attributes[aI].cloneNode()); 
     } 
     // Add any content the original script element has 
     const scriptContent = document.createTextNode(scriptNode.textContent); 
     scriptElement.appendChild(scriptContent); 
     // Remove the original script element 
     scriptNode.remove(); 
     // add the new element to the list 
     scriptElements.push(scriptElement); 
    } 
    this.dynamic.nativeElement.appendChild(div); 
    // Finally add the new script elements to the DOM 
    for (let i = 0; i < scriptElements.length; i++) { 
     this.dynamic.nativeElement.appendChild(scriptElements[i]); 
    } 
    } 
}