Angular2 (ionic2): in ios, all click events on a lazy loaded page do not trigger change detection? - Codes Helper

recently, in the development of using ionic2, there is a "strange" thing: on a page, there is a click event to change the active (a class) of the a tag in the page element to control whether the element is selected or not. It works fine in browsers and android real machines, but in ios real machines, the a tag does not change. Debug found that all the code in the click event on ios was executed, but the page was not refreshed. So at the end of each click"s event code, add this.changeDetectorRef.detectChanges (), to manually let the page perform change detection, and the problem is solved. But the question is, according to the nature of angular2, all click events should automatically trigger change detection throughout the component tree. Why did this page fail in ios? does any god know why?
complete code:
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; jPP) {
        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; jPP) {
        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;iPP){
        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;iPP){
        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 >