angular2(ionic2):在ios中,某个懒加载页面上的所有click事件不触发变化检测?

发布于 2022-09-07 16:30:43 字数 6792 浏览 17 评论 0

最近在运用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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文