Angular4 でコンテンツを表示する方法の CSS スタイルのサンプル コード

この記事では、Angular 4 でコンテンツを表示する方法の CSS スタイルに関する関連情報を主に紹介します。この記事では、サンプル コードを通じて詳細に紹介しています。この記事は、学習や仕事に必要なすべての人の参考と学習に役立ちます。以下の指示に従ってください。この記事の本文を始める前に、まず angular2 でのページ上のタグ付きテキストの出力に関する関連内容を見てみましょう。XSS の問題を体系的に防ぐために、Angular はデフォルトですべての値を信頼できないものとして扱います。 属性 (Properties)、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 スタイルが表示されます。

関連する推奨事項; Angular はプロジェクトで定義されている json ファイルを取得します

angularjs の組み込みメソッドとは何ですか

AngularJS を使用してフォーム検証機能を完了する方法の概要

以上がAngular4 でコンテンツを表示する方法の CSS スタイルのサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。