This is what i have:
providers/global/global.ts
import {Injectable} from 'angular2/core';
@Injectable()
export class Global {
public background: string;
constructor() {
this.background = 'yellow';
}
setBackground(value) {
this.background = value;
}
getBackground() {
return this.background;
}
}
pages/home/home.ts
import {Page, NavController, Alert, ActionSheet} from 'ionic-angular';
import {ConfigPage} from '../config/config';
import {Global} from '../../providers/global/global';
@Page({
templateUrl: 'build/pages/home/home.html',
providers: [Global]
})
export class HomePage {
private bg: string;
constructor(private nav: NavController, private global: Global) {
this.bg = global.getBackground();
}
}
and in the home.html i have [ngClass]="bg"
pages/config/config.ts
import {Page, NavController} from 'ionic-angular';
import {Global} from '../../providers/global/global';
@Page({
templateUrl: 'build/pages/config/config.html',
providers: [Global]
})
export class ConfigPage {
private bg: string;
constructor(private nav: NavController, private global: Global) {
this.bg = global.getBackground();
}
onChange($event) {
this.global.setBackground($event);
console.log(this.global.getBackground());
}
}
The global variable is working, the problem is that get reseted every time, when i go to the config page and set the global variable to another color with the onChange() function using a select, works… but when i go back to the home page the global variable reset to yellow, and then if i go to config page is yellow too.
What i am doing wrong? i don’t get it.