[Angular] innerHTMLにスタイルを適用する

2019年12月18日 propg 未分類, 0

angularのhtmlテンプレートで [innerHTML]=”htmlValue” などと、別ファイルなどで入力しているHTMLを埋め込むことができます。

とても便利ですが、このときのhtmlからは、いくつかの情報が除去されて出力されます。

例えば、

htmlValue = ‘<div class=”msg” style=”color: red; font-size: 1.2em”>Hello!</div>’;

と指定した場合、

表示されるときには、style指定が除去されます。class指定もです。

<div>Hello!</div>

これは仕様なのですが、innerHTMLに埋め込む内容を、別の場所に置くファイルに入力している場合、スタイルを自由に設定することができません。

どうしても色などを変えたい場合は、

<font color=”red”><div>Hello!</div></font>

など、スタイルではなく、fontやbタグなどを使用すればよいですが、HTML5では奨められていない定義を書きたくありません。

この場合、以下のようなパイプを作成し、innerHTML指定時に追加すれば、指定したものがそのまま反映されます。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";

/** innerHTML指定するときに、styleやclass定義などを除去せずにそのまま出力する
 * [innerHTML]="value | safeHtml"
 */
@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(html) {
    const result = this.sanitizer.bypassSecurityTrustHtml(html);

    return result;
  }
}

SafeHtmlPipeをモジュールに定義し、

[innerHTML]="htmlValue | safeHtml"

とすると、指定したHTML文字列がそのまま出力されます。

とても便利ですが、注意が必要です。指定したものがそのまま反映されますので、

埋め込むhtmlに

<style>
  {font-size: 1.2em;}
</style>

と、全体に影響のあるスタイルを指定したりすると、画面全体に反映されてしまい、デザインメチャメチャです。

もともとそうならないようにスタイルやクラス定義を除去しているのをスルーしていますので、影響を範囲を確認しながら、スタイル指定を試してみるといいと思います。

タグに直接スタイル指定するほうが安心です。

 

== ランキングに参加しています。ぜひクリックお願いします ==

Caps Lockってどういう意味？ [Wijmo][angular] FlexGridFilterの選択肢をカスタマイズする