System information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.3.1
Xcode version: Not installed
In an ionic’s tabs based app, if we handle a button click from a tab button, change some states, ionic’s changing detecting mechanism for the current page will stop working. Only thing we can do is exist and re-enter the view.
Steps to reproduce:
- start a new project demo with default tabs template.
add a button tab in tabs.html as:
<ion-tab tabTitle=“” tabIcon=“camera” (ionSelect)=“takePhoto()”>
- Inject events into tabs.ts, and add a test method in tabs.ts:
export class TabsPage { ... constructor(private events: Events) {} takePhoto() { this.events.publish("data:changed"); } }
- Inject Events into home.ts, and subscribe to above event:
export class HomePage { datatest: string = "old"; constructor(public navCtrl: NavController, public events: Events) { events.subscribe("data:changed", this.change.bind(this)); } change() { console.log("data changed!"); this.datatest = "new!"; } }
- add a variable binding to anywhere in home.html:
<button ion-button (click)="change()">TEST</button> <div>{{datatest}}</div>
- click the 'camera‘ tab, watch the home page. no update is happen. while the console print the expected value.
- click the ‘test’ button on home page, no update is happen also.
- re-enter the home page, repeat 7, update take effect.