Angular2サイトIは角2サイトを持っていると私はこのようなページにいくつかのスタイルでいくつかのHTMLを挿入しようとしている私のスタイリング

Question

ストリッピング私たちのWeb APIを呼び出します。 results.top3.TopThreeCommentsは次のようになります文字列です。

<p><span style="text-decoration: underline;">underline</span></p> 

もちろん、スタイリングは、スパン内のテキストに下線を引くためにsuppposedされていますが、それはレンダリングだときにテキストに下線が引かれないように、何らかの理由で角度サイトでは、スタイルをストリップ。

これはなぜですか？

私はここに私のGoogle検索でサイトに出くわした：

Angular2 innerHtml binding remove style attribute

それはDomSanitizer使用することをお勧めします：

<div [innerHtml]="html | safeHtml"></div> 

：ページ上で、その後

import { DomSanitizer } from '@angular/platform-browser' 
import {PipeTransform, Pipe} from "@angular/core"; 

@Pipe({ name: 'safeHtml'}) 
export class SafeHtmlPipe implements PipeTransform { 
    constructor(private sanitized: DomSanitizer) {} 
    transform(value) { 
    return this.sanitized.bypassSecurityTrustHtml(value); 
    } 
} 

を...と

私は上記のタイスクリプトをメインコンポーネントファイルに追加しましたページ）と私のdivのinnerHTMLの属性にsafeHtmlを挿入：

Uncaught Error: Template parse errors: 
The pipe 'safeHtml' could not be found ("op3.TopThreeComments"> 
        <strong>Comments</strong><br> 
        <div [ERROR ->][innerHTML]="results.top3.TopThreeComments | safeHtml"></div> 
       </div> 
"): ng:///ResultsAppModule/ResultsComponent.html@73:25 

誰もが私がやっている知っています：

<div [innerHTML]="results.top3.TopThreeComments | safeHtml"></div> 

このすべてがやったはクロームコンソールで私に次のエラーを与えました違う。それとも、これをやる代わりに（できればもっと簡単な）方法がありますか？

Answer 1

Angular2 innerHtml binding remove style attributeの下に記載されているように、SafeHtmlPipeをモジュール宣言に入れましたか？これにより、safeHtmlシンボルが宣言されているモジュールの外に見えるようになります。