Angular 2 插入带样式的 html

分类:JavaScript     发布时间:2017-07-20     最后更新:2017-08-26     浏览数:1905

在 Angular 2 的组件中如何插入带行内样式的 html

想必大家都知道出于安全的考虑,angular 会把所有输入变量的内容视为不安全的,也就是所有输入变量的内容会被过滤;

带 js, css 都是视为不安全的,angular 会自动把视为不安全的字符串过滤掉。

如果想想插入带样式的 HTML ,那么必须要告诉 angular 我传给你的字符串是安全。

闲话少说,直接上代码。

插入html 使用 输入属性 [innerHtml]="htmlContent"

app.component.ts

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  html: any;

  constructor(private sanitizer: DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml(`<span style=\"color:red;\">1234</span>`);
  }
}

app.component.html

<div [innerHtml]="html"></div>
上一篇: Windows 常用命令 下一篇: 把新的 ionic 项目添加到 gitee.com