在ts文件模拟一个html文本:

import { Component, OnInit } from '@angular/core';
@Component({selector: 'app-inner-html',templateUrl: './inner-html.component.html',styleUrls: ['./inner-html.component.css']
})
export class InnerHtmlComponent implements OnInit {constructor() { }content = '<span>'+				'<strong>'+					'<span style="font-size: 50px;color:red">'+						'把啦啦啦'+					'</span>'+				'</strong>'+			'</span>'ngOnInit() {}
}

html文件:

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

这时在页面上就会出现

但是发现原本在html文本中设置的style样式都不见了 我们需要添加一个pipe

先创建一个pipe文件:

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

然后在app.module中引入一下:

import { HtmlPipe } from './inner-html/innerhtmlpipe';

@NgModule({declarations: [...HtmlPipe, ...],

最后在html文件中使用:

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

这是页面上的文字就会出现style样式了