Angular 2：綁定保持javascript代碼的HTML內容

我正在編寫一個Angular 2應用程序，在某些部分需要呈現從外部API加載的HTML。Angular 2：綁定保持javascript代碼的HTML內容

這工作得很好純，靜態HTML使用angulars [innerHTML的]指令：

<div [innerHtml]="htmlToBeRendered"> </div>

是beeing注入是從內容管理系統加載的HTML。有時候這個HTML需要有一些用於純粹的「UI」目的的Javascript代碼（在注入的HTML中有一些簡單的DOM操作）。這將是香草JS，並不會依賴像JQuery這樣的其他框架。

有沒有辦法讓這個JS代碼通過角度綁定到dom上？目前所有JS代碼都被Angular刪除。

我知道這是一項安全功能，但加載HTML的API可被視爲「安全」源。

來源

2017-01-30 Simon

我相信你可以使用這個用例的DomSanitizer。該服務有一個bypassSecurityTrustHtml方法，這是專門爲您的問題而設計：

@Component({ 
    selector: 'test', 
    template: `<div [innerHtml]="htmlToBeRendered"> </div>` 
}) 
export class TestComponent { 

    public htmlToBeRendered: SafeHtml; 

    constructor(public sanitizer: DomSanitizer, public htmlService: SomeApi){} 

    public getStaticHtml(): void { 
     this.htmlService.getStaticHtml().subscribe((html: string) => { 
     this.htmlToBeRendered = this.sanitizer.bypassSecurityTrustHtml(html); 
     }); 
    } 

}

欲瞭解更多信息，你可以看看這個answer我也

來源

2017-01-30 10:55:39 PierreDuc

這是工作，如果我嘗試調用的方法窗口對象是這樣的： --- --- 但是，如果我嘗試調用這是一個腳本標籤內聲明我自己的方法是行不通： --- <按鈕的onclick =「DoSomething的（）」> Clicke我！ --- – Simon

@Simon我也有完全相同的問題。既然你幾個月前就注意到了，我想你會發現這個解決方案，請分享。這將是一個幫助。 – user1501382

Angular 2：綁定保持javascript代碼的HTML內容

回答

相關問題