这个源于一个需求:从后台拿到用户评论的内容,该内容是字符串的,但是里面包含了html代码。要求显示的时候按照html来显示,不是按照字符串来显示。并且要求任意的段文字添加样式;
思路:用属性绑定的方法来innerHTML;将从后台拿到的字符串放在一个变量里面,用属性绑定[innerHTML]="aa",aa为存储字符串的变量
任意字符串添加样式:
先把预先的样式写在css里面,在评论的时候带着指定的标签输入,再按照html显示
例子:
ts:
import { Component } from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {questionnaireService} from "../questionnaireService";
@IonicPage({
name:'Questionnairepart1Page',
segment:'Questionnairepart1Page/:strAccountNO/:strTypeID/:strDeviceID'
})
@Component({
selector: 'page-Questionnairepart1Page',
templateUrl: 'Questionnairepart1.html',
providers: [questionnaireService]
})
export class Questionnairepart1Page {
public text:string="<B>我是标题</B>";
public aa:any[]=["<B>我是标题</B>","我是标题<span>我要变红</span>","<strong>我是标题</strong>","<h3>我是标题</h3>","<i>我是标题</i>","<div style='border:1px solid red'>我是标题</div>","<p>我是标题</p>","<h5>我是标题</h5>","<B>我是标题</B>","<B>我是标题</B>","<B>我是标题</B>"]
constructor(public navCtrl: NavController,
public navParams: NavParams,
public QService:questionnaireService){
}
ionViewDidLoad() {
}
}
html:
[innerHTML]="judge[i]"
<ion-navbar color="dark" hideBackButton="true">
<ion-title>
问卷模板1
</ion-title>
</ion-navbar>
<ion-content >
{{text}}
<p id="text"></p>
<p escape="false">{{text}}</p>
<p *ngFor="let a of aa;let i=index">
<span class="red" [innerHTML]="aa[i]"></span>
</p>
</ion-content>
css:
.red{
span{
color: red;
}
}
效果:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)