Angular4 中显示内容的 CSS 样式

发表于   |   分类于   |     |   阅读次数

摘要：本文简单介绍在使用 Angular4 的时候，显示要内容的 CSS 样式

问题

Angular 中有 innerHTML 属性来设置要显示的内容，但是如果内容包含 CSS 样式，无法显示样式的效果。
比如：

1
2
3
public content: string = "<div style='font-size:30px'>Hello Angular</div>";

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

只会显示 Hello World ,字体不会是 30px，也就是 CSS 样式没有效果。

解决方案

自定义一个 Pipe 来对内容做转换。看下面代码。

写一个 HtmlPipe 类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

1
2
3
4
5
@NgModule({
  declarations: [
    HtmlPipe
  ]
})

在 innerHtml 中增加管道名字

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

这样就可以显示 content 的 CSS 样式。