angular2如何识别字符串中的html标签,并按照html来显示视图

这个源于一个需求:从后台拿到用户评论的内容,该内容是字符串的,但是里面包含了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;
  }
}

效果:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值