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]"
css:<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>
.red{ span{ color: red; }}
效果:
阅读全文
0 0
- angular2如何识别字符串中的html标签,并按照html来显示视图
- HTML标签分类:按照标签的显示模式分类
- 去除字符串中的HTML标签
- 去除字符串中的html标签
- 去除字符串中的HTML标签
- 去除字符串中的html标签
- Play FrameWork中scala.html页面如何显示带有html标签元素的字符串信息
- 带html标签的字符串 显示
- 如何去掉从数据库中读出的带有html标签的字符串,并是标签起效,显示在前台页面
- IE Bug 1 - 错误识别出现在javascript脚本中的字符串,导致HTML标签解析错误
- 把字符串中的数字找出来并按照升序排序
- 如何除去HTML标签并保留文字
- 如何隐藏和显示HTML标签
- 如何隐藏和显示HTML标签
- 去除指定字符串中的HTML标签
- C#去除字符串中的html标签
- 除去字符串中的Html元素标签
- 获取HTML字符串中的特定标签
- 访问本地Tomcat服务器 localhost/127.0.0.1:8080/web_app/xx- Connection refused
- 2133-数据结构实验之栈与队列三:后缀式求值
- 树形结构地柜查询子节点
- jTessBoxEditor使用
- 2134-数据结构实验之栈与队列四:括号匹配
- angular2如何识别字符串中的html标签,并按照html来显示视图
- c++ 三目运算符
- 3333-数据结构实验之栈与队列五:下一较大值(一)
- hive中的NULL(hive空值处理)
- #每天一点R语言# 简单运算
- ACM复习(2)1078 破密
- http 协议 基础
- Lifetime-Based Memory Management for Distributed Data Processing Systems
- LSH(局部敏感哈希算法)实现文本的相似性比对