2017-01-30 1 views
0

私はAngular 2アプリケーションを書いています。一部のアプリケーションでは、外部APIからロードされたHTMLをレンダリングする必要があります。角2:javascriptコードを保持するHTMLコンテンツをバインドする

これはangulars [innerHTMLプロパティ]ディレクティブを使用することにより、純粋な、静的なHTMLのために正常に動作します:

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

コンテンツ管理システムからロードされて噴射されるbeeingてHTML。時には、このHTMLは、純粋な "UI"目的(注入されたHTML内のいくつかの簡単なDOM操作)のためにいくつかのJavascript-Codeを持つ必要があります。これはvanilla JSとなり、JQueryのような他のフレームワークには依存しません。

角度を使ってdomにバインドしている間にこのJSコードを保持する方法はありますか?現在、すべてのJSコードはAngularによって削除されています。

これはセキュリティ機能ですが、HTMLがロードされているAPIは安全なソースと考えることができます。

答えて

0

このケースではDomSanitizerを使用することができます。私は上のメソッドを呼び出すしようとすると、これが機能しているだけでなく、私のこのanswer

+0

で見ることができ、より多くの情報については

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

:このサービスは、具体的問題のために設計されてbypassSecurityTrustHtml方法がありますこのようなウィンドウオブジェクト: --- --- しかし、私はそれが動作しませんスクリプトタグ内で宣言されて自分のメソッド呼び出ししようとした場合: --- <ボタンのonclick =「doSomethingのを()」>私をClicke! --- – Simon

+0

@imim私も全く同じ問題があります。数ヶ月前に気付いたので、解決策を発見したと思います。分かち合いましょう。それは助けになるでしょう。 – user1501382

関連する問題