angular标签使用[innerHTML]并且解决样式问题以及在ts拼写div,html代码时无法在html页面生成问题
话不多说，刚使用angular不久的同学有时脱离不jq 的使用以及习惯在js中拼好div 然后append到html中，所以发现在angular中这个方法行不通，拼好的div 不能在页面生成。下面直接贴代码，有两种方法
<div [innerHTML]="showHtml" > </div>通过这么写就能把showHtml中拼好的div 展示在html页面中，
ts中：
this.showHtml = '<p style="font-weight: bold;">1、资源下发提醒</p>'
**html中：**
<div [innerHTML]="showHtml " ></div>
到这里就发现是不比通过jq 获取节点然后在$("#xx").append("
") 添加到对应的div下面方便的多了。
但也会发现一个问题就是，没有样式，样式不生效，下面就是贴两种方法的代码
方法一：
**ts:**
在使用的页面引入
import { DomSanitizer } from '@angular/platform-browser';
constructor(
private sanitizer: DomSanitizer
) { }
this.showHtml = this.sanitizer.bypassSecurityTrustHtml("<div style='color:red'>angular中使用有样式的拼写<div>");
**html:**
<div [innerHTML]="showHtml " ></div>
方法二：
写一个管道，然后在html中使用管道就ok了样子：<div [innerHTML]=“showHtml | Html”>,然而管道可能有些同学不怎么熟悉，下面也直接贴代码
首先可以在app.component.ts同级中生成 或者在自己自定义的目录里面生成一个管道
import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
name: "Html"
})
export class MyPipePipe implements PipeTransform {
constructor (private sanitizer: DomSanitizer) {
}
transform(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
接下来在app.module.ts里面引入
@NgModule({
declarations: [
MyPipePipe
]
})
最后你在ts中：
正常的拼写div
this.showHtml = "<div style='color:red'>angular中使用有样式的拼写<div>";
html中：
<div [innerHTML]="showHtml | Html"></div>
showHtml | Html中的 Html 就是上面写的管道名字
@Pipe({
name: "Html"
})
反正最终就是这么写
<div [innerHTML]=“showHtml | Html”>