web-dev-qa-db-ja.com

Angular 2 Typescriptのinnerhtmlでスタイルが機能しない

HtmlをinnerHtmlとしてビューに渡します。以下は私の見解です

<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>';
htmlcssangular
34
Chatra

この動作は正常です。デフォルトでカプセル化はinnerHTMLであるため、Emulatedに追加されたクラスは無視されます。つまり、Angularは、スタイルがコンポーネントの内側と外側をインターセプトするのを防ぎます。コンポーネントのカプセル化をNoneに変更する必要があります。このようにして、クラスを任意の場所で定義できます。styles内、または別個の.css、.scss、または.lessスタイルシート（そうではありません） matter）とAngularはDOMに自動的に追加します。

import { Component, ViewEncapsulation } from '@angular/core';

@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>';
  }
}
78
Unsinkable Sam

私も同じ問題に直面していましたが、以下のリンクを読んだ後、私は解決策を見つけました、それはパイプを使用せずに行われました

これがあなたのお役に立てば幸いです。

https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd9

7
Shehram Tahir

インラインスタイルの代わりに、スタイルをクラスに入れます。

classの使用がオプションかどうかはわかりませんが、ここにPlunker demo があります。

HTML：

this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>'

CSS：

.demo{
    background-color: blue;
}
0
Nehal