angular2(ionic2):在ios中,某个懒加载页面上的所有click事件不触发变化检测?
最近在运用ionic2的开发中,遇到了一个“奇怪”的事情:某个页面中,有用click事件来改变页面元素中的a标签的active(一个class)来控制元素是否选中。在浏览器和android实机中工作正常,可是到了ios实机中,a标签不会变化。debug发现在ios上click事件中的所有代码都执行了,但是页面没有刷新。于是在每个click的事件代码的最后加上this.changeDetectorRef.detectChanges(),手动让这个页面执行变化检测,问题解决。但问题是,按照angular2的特性,所有的click事件都应该会自动触发整个组件树的变化检测,为什么这个页面在ios中失效了,有哪位大神知道原因吗?
完整代码:
1.setting.module.ts:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import {SettingPage} from "./setting";
import {SharedModule} from "../../../../../app/shared.module";
@NgModule({
declarations: [
SettingPage
],
imports: [
IonicPageModule.forChild(SettingPage),SharedModule
],
})
export class SettingModule {}
2.setting.ts
import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {AlertService} from "../../../../../service/alert.service";
import {AppHttp} from "../../../../../service/app-http.service";
import {SettingService} from "./setting.service";
@IonicPage()
@Component({
selector: 'setting',
templateUrl: 'setting.html'
})
export class SettingPage{
constructor(public settingService: SettingService,public navCtrl: NavController,public navParams: NavParams,public http:AppHttp ,public alertService:AlertService,public cd:ChangeDetectorRef) {
}
ionViewDidLoad(){
}
ionViewWillEnter(){
}
chooseOddsType(type){
if(this.settingService.setting.settingJson.oddsType!=type){
this.settingService.setting.settingJson.oddsType=type;
}
//this.cd.detectChanges();不加这行在iOS中就有问题
}
chooseGoalTip(type){
if(!this.settingService.setting.settingJson.goalTip){
this.settingService.setting.settingJson.goalTip=[];
}
for (let j = 0; j < this.settingService.setting.settingJson.goalTip.length; j++) {
if (type ==this.settingService.setting.settingJson.goalTip[j]) {
this.settingService.setting.settingJson.goalTip.splice(j,1);
this.cd.detectChanges();
return;
}
}
this.settingService.setting.settingJson.goalTip.push(type);
//this.cd.detectChanges();不加这行在iOS中就有问题
}
chooseRedCardTip(type){
if(!this.settingService.setting.settingJson.redCardTip){
this.settingService.setting.settingJson.redCardTip=[];
}
for (let j = 0; j < this.settingService.setting.settingJson.redCardTip.length; j++) {
if (type ==this.settingService.setting.settingJson.redCardTip[j]) {
this.settingService.setting.settingJson.redCardTip.splice(j,1);
//this.cd.detectChanges();不加这行在iOS中就有问题
return;
}
}
this.settingService.setting.settingJson.redCardTip.push(type);
//this.cd.detectChanges();不加这行在iOS中就有问题
}
isRedCardTipActive(type){
for(let i=0;i<this.settingService.setting.settingJson.redCardTip.length;i++){
if(this.settingService.setting.settingJson.redCardTip[i]==type){
return true;
}
}
return false;
}
isGoalTipActive(type){
for(let i=0;i<this.settingService.setting.settingJson.goalTip.length;i++){
if(this.settingService.setting.settingJson.goalTip[i]==type){
return true;
}
}
return false;
}
}
3.setting.html:
<ion-header>
<div class="navBar no_bg">
<div class="topBar">
<a class="back_icon_white" href="javascript:;" navPop></a>
<div class="titleBar">设置</div>
</div>
</div>
</ion-header>
<ion-content class="bg_242b45">
<div class="pt10 pl10 pr10 pb60">
<!--提示设置-->
<div class="whiteBlock">
<div class="title40">提示设置</div>
<ul class="setUpList">
<li class="hasLink" tappable (click)="goToProvider()">赔率公司 <span class="righthTxt pr15">{{settingService.setting.settingJson?.provider?.description}}</span></li>
<li>数据类型
<div class="setUpSetLectBtn">
<a href="javascript:;" [ngClass]="{active:settingService.setting.settingJson.oddsType==1}" tappable (click)="chooseOddsType(1)">欧赔</a>
<a href="javascript:;" [ngClass]="{active:settingService.setting.settingJson.oddsType==2}" tappable (click)="chooseOddsType(2)" >亚盘</a>
<a href="javascript:;" [ngClass]="{active:settingService.setting.settingJson.oddsType==3}" tappable (click)="chooseOddsType(3)">大小球</a>
</div>
</li>
<li>进球提示
<div class="setUpSetLectBtn">
<a href="javascript:;" [ngClass]="{active:isGoalTipActive(1)}" tappable (click)="chooseGoalTip(1)">声音</a>
<a href="javascript:;" [ngClass]="{active:isGoalTipActive(2)}" tappable (click)="chooseGoalTip(2)">震动</a>
<a href="javascript:;" [ngClass]="{active:isGoalTipActive(3)}" tappable (click)="chooseGoalTip(3)">弹窗</a>
</div>
</li>
<li>红牌提示
<div class="setUpSetLectBtn">
<a href="javascript:;" [ngClass]="{active:isRedCardTipActive(1)}" tappable (click)="chooseRedCardTip(1)">声音</a>
<a href="javascript:;" [ngClass]="{active:isRedCardTipActive(2)}" tappable (click)="chooseRedCardTip(2)">震动</a>
<a href="javascript:;" [ngClass]="{active:isRedCardTipActive(3)}" tappable (click)="chooseRedCardTip(3)">弹窗</a>
</div>
</li>
<li>仅提示关注的(进球提示与红牌提示)
<div class="setUpswitch" [ngClass]="{active:settingService.setting.settingJson.tipForFocusMatchesOnly}"
tappable (click)="settingService.setting.settingJson.tipForFocusMatchesOnly=!settingService.setting.settingJson.tipForFocusMatchesOnly;cd.detectChanges();"><i></i></div>
</li>
<li>排名显示
<div class="setUpswitch" [ngClass]="{active:settingService.setting.settingJson.showRank}"
tappable (click)="settingService.setting.settingJson.showRank=!settingService.setting.settingJson.showRank;cd.detectChanges();"><i></i></div>
</li>
</ul>
</div>
</div>
</ion-content>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论