Angular 4 で CSS スタイルを表示する

今回は、Angular 4 で CSS スタイルを表示するための 注意事項 をご紹介します。以下は実際的なケースです。見てみましょう。

この記事の本文を始める前に、まず angular2 でのページ上のタグ付きテキストの出力に関する関連内容を見てみましょう。XSS の問題を体系的に防ぐために、Angular はデフォルトですべての値を信頼できないものとして扱います。 属性 (Property)、DOM 要素の属性 (Attribte)、CSS クラスバインディングや補間式 などを介してテンプレートから DOM に値が挿入されるとき、 Angular はこれらの値をサニタイズし、信頼できない値をエンコードします。

リーリー

この属性は HTML タグ を認識できますが、タグ内の属性値は認識できません

問題が見つかりました

Angular には、表示するコンテンツを設定する innerHTML プロパティがあることは誰もが知っていますが、コンテンツに CSS スタイルが含まれている場合、スタイルの効果は表示できません。

例:

h3>Binding innerHTML</h3>
<p>Bound value:</p>
<p
class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>Result of binding to innerHTML:</p>
<p
class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>

Hello World のみが表示され、フォントは 30 ピクセルではありません。つまり、CSS スタイルは効果がありません。

解決策

パイプをカスタマイズしてコンテンツを変換します。以下のコードを見てください。

HtmlPipe クラスを書く

[innerHTML]="htmlSnippet"

パイプ HtmlPipe を必要なモジュールに導入します

public content: string = "<p style=&#39;font-size:30px&#39;>Hello Angular</p>";
<p [innerHTML]="content"></p>

innerHtmlにパイプ名を追加

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
 name: "html"
})
export class HtmlPipe implements PipeTransform{
 constructor (private sanitizer: DomSanitizer) {
 }
 transform(style) {
 return this.sanitizer.bypassSecurityTrustHtml(style);
 }
}

これにより、コンテンツの CSS スタイルが表示されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がAngular 4 で CSS スタイルを表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。