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

来源:互联网 发布:怎么检查网络被盗用 编辑:程序博客网 时间:2024/05/20 11:37

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