私はinnerHtmlとしてHTMLを私のビューに渡しています。以下は私の見解ですスタイルがinnerhtmlのAngular 2で動作しないTypescript
<div [innerHTML]="someHtmlCode"></div>
私は下のコードを渡すとうまくいきます。
this.someHtmlCode = "<div><b>This is my HTML.</b></div>"
色を含む以下のコードを渡すと、機能しません。
this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';
あなたが取得しているこの動作は正常です。デフォルトでカプセル化がEmulatedであるため、innerHTMLに追加されたクラスは無視されます。 Angularは、スタイルがコンポーネントの内部と外部を傍受しないようにすることを意味します。 コンポーネントのカプセル化をNoneに変更する必要があります。 この方法では、あなたが好きな場所でクラスを定義することができます：stylesの中か、別の.css、.scssまたは.lessのスタイルシート（それは問題ではありません）とAngularはそれらを自動的にDOMに追加します。
@Component({
selector: 'example',
styles: ['.demo {background-color: blue}'],
template: '<div [innerHTML]="someHtmlCode"></div>',
encapsulation: ViewEncapsulation.None,
})
export class Example {
private someHtmlCode = '';
constructor() {
this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
}
}
インラインスタイルではなく、スタイルをクラスに入れます。
classを使用するかどうかはわかりませんが、ここではPlunker demoです。
HTML：
this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>'
CSS：
.demo{ background-color: blue; }
私のデモcssが少ないファイルであれば、違いはありますか？ – Chatra
これは、CSSがグローバルstyles.cssファイルにあり、グローバルではないCSSファイルにない場合に機能します。誰かがその違いを説明することができれば助けになるだろうが、その間にこの作業を行うことがそのような詳細に依存することを他人に知らせるためのコメントを投稿すると思った。 –
私も同じ問題に直面していたが、リンクの下にこれを読んだ後、私は解決策を考え出し、それをパイプに
を使用せずに行われていたが、これはあなたを助けることを願っています。
https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90
クラスなしでスタイルだけを渡すとうまくいきません – Chatra
あなたは正しいですし、それを動作させるための解決策を見つけることができませんでした。 インラインスタイルを使用しないようにアドバイスします。それをテンプレート内で混合させる。 –