ionic html转义

未结帖
0 695
ajian admin_jim 2017-11-26
悬赏:5飞吻
<!--    
  Generated template for the AnswerPage page.    
  See https://ionicframework.com/docs/components/#navigation for more info on    
  Ionic pages and navigation.    
-->    
<ion-header no-border [class.animate]="tabanimate" [class.idark]="isIdark" (tap)="tapEvent($event)">    
<ion-navbar color="mblue">    
<ion-title>{{title}}</ion-title>    
</ion-navbar>    
</ion-header>    
<ion-content (ionScroll)="onScroll($event)" [class.idark]="isIdark">    
<header [data]="data"></header>    
<section class="dv_content">    
<div [innerHtml]="tr(data.text)"></div>    
</section>    
</ion-content>    
<footer [data]="data" [tabanimate]="tabanimate" [_id]="_id"></footer>
import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';    
import { IonicPage, NavController, NavParams, Content } from 'ionic-angular';    
import { Headers, Http } from '@angular/http';    
import { DomSanitizer } from '@angular/platform-browser'    
import { UserServiceProvider } from '../../providers/user-service/user-service';    
@IonicPage()    
@Component({    
selector: 'page-answer',    
templateUrl: 'answer.html',    
})    
export class AnswerPage {    
@ViewChild(Content) content: Content;    
//头部导航动画class属性控制    
  tabanimate: boolean = false;    
old_scrollTop = 0;    
//头部导航显示    
  title = "回答";    
//数据存储    
  data: any = {};    
//文章id    
  _id;    
//关注隐藏控制属性    
  ishide: boolean = true;    
iscoll: boolean = false;    
isthank: boolean = false;    
conts = 0;    
isIdark;    
constructor(public UserService: UserServiceProvider, public sanitizer: DomSanitizer, public ref: ChangeDetectorRef, public http: Http, public navCtrl: NavController, public navParams: NavParams) {    
this._id = this.navParams.get("_id");    
this.getdata();    
this.isIdark = this.UserService.isIdark;    
}    
//获取文章数据    
  getdata() {    
let url = "https://www.devonhello.com/chihu2/answer_dec";    
var headers = new Headers();    
headers.append('Content-Type', 'application/x-www-form-urlencoded');    
this.http.post(url, "id=" + this._id, {    
headers: headers    
})    
.subscribe((res) => {    
this.data = res.json()[0];    
this.conts = this.data.mark.cont;    
});    
}    
tr(html){    
return this.sanitizer.bypassSecurityTrustHtml(html);    
}    
onScroll($event: any) {    
let scrollTop = $event.scrollTop;    
if (scrollTop > 110 && (this.old_scrollTop - scrollTop) < 0) {    
if (!this.tabanimate) {    
this.tabanimate = true;    
}    
} else {    
this.tabanimate = false;    
if (scrollTop > 100) {    
this.title = this.data.title;    
} else {    
this.title = "回答";    
}    
}    
this.old_scrollTop = scrollTop;    
this.ref.detectChanges();    
}    
//点击到顶部    
  tapEvent(e) {    
this.content.scrollToTop();    
}    
}


热忱回答0


最近热帖

近期热议

  1. javascript——prototype与__proto 9
  2. Mysql 中出现的Data truncated for column 3
  3. 在nginx中使用x-sendfile的解决方案 3
  4. 高版本jQuery面插件实现Ajax上传图片 1
  5. Thinkphp Socket.class.php 类的使用 1
  6. 使用ionic3创建第一个App 0
  7. ios-oc html5 0
  8. nginx.conf 0
  9. 基于ionic3.4.0的项目搭建 0
  10. php 缩略图 0