Angular4でCSSスタイルを表示するサンプルコード

この記事では、Angular 4 でコンテンツを表示する方法の CSS スタイルに関する関連情報を主に紹介します。この記事では、サンプル コードを通じて詳細に紹介しています。この記事は、学習や仕事に必要なすべての人の学習に役立ちます。以下に従ってください、一緒に学びましょう。皆さんのお役に立てれば幸いです。

まえがき

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

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>

[innerHTML]="htmlSnippet"

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

問題が見つかりました

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

例:

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

<p [innerHTML]="content"></p>

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

解決策

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

HtmlPipeクラスを書く

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);
 }
}

必要なモジュールにパイプHtmlPipe

@NgModule({
 declarations: [
 HtmlPipe
 ]
})

を導入し、innerHtml

<p [innerHTML]="content | html"></p>

にパイプ名を追加します。これにより、CSSスタイルのコンテンツを表示できます。

関連する推奨事項:

完全な Angular4 FormText コンポーネントの実装方法の詳細な説明

Angular4 フォーム応答関数のサンプル分析

Angular4 でのプロジェクトの準備と環境構築操作

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