event - select change angular 5

Evento de cambio de página iónico 2

Question

Quiero ejecutar algún código cada vez que la página cambia.

Podría agregar un método ngOnDestroy a cada página. Parece que podría usar los ganchos del ciclo de vida de la página Ionic 2 (por ejemplo, ionViewDidUnload ) para el mismo efecto, pero no me he molestado en probar eso. Preferiría agregar un solo método a la clase de la aplicación principal.

Veo que puedes suscribirte a los eventos del enrutador Angular 2. ¿Cómo puedo traducir eso para usar en Ionic 2? Recibo un error al import { Router } from ''@angular/router; en primer lugar:

TypeScript error: <path>/node_modules/@angular/router/src/common_router_providers.d.ts(9,55): Error TS2305: Module ''"<path>/node_modules/@angular/core/index"'' has no exported member ''NgModuleFactoryLoader''.
TypeScript error: <path>/node_modules/@angular/router/src/router.d.ts(14,39): Error TS2305: Module ''"<path>/node_modules/@angular/core/index"'' has no exported member ''NgModuleFactoryLoader''.
TypeScript error: <path>/node_modules/@angular/router/src/router_module.d.ts(9,10): Error TS2305: Module ''"<path>/node_modules/@angular/core/index"'' has no exported member ''ModuleWithProviders''.

configuración webpack

var path = require(''path'');
module.exports = {
entry: [
path.normalize(''es6-shim/es6-shim.min''),
''reflect-metadata'',
path.normalize(''zone.js/dist/zone''),
path.resolve(''app/app.ts'')
],
output: {
path: path.resolve(''www/build/js''),
filename: ''app.bundle.js'',
pathinfo: false // show module paths in the bundle, handy for debugging
},
module: {
loaders: [
{
test: //.ts$/,
loader: ''awesome-typescript'',
query: {
doTypeCheck: true,
resolveGlobs: false,
externals: [''typings/browser.d.ts'']
},
include: path.resolve(''app''),
exclude: /node_modules/
}
],
noParse: [
/es6-shim/,
/reflect-metadata/,
/zone/.js(//|//)dist(//|//)zone/
]
},
resolve: {
alias: {
''angular2'': path.resolve(''node_modules/angular2'')
},
extensions: ["", ".js", ".ts"]
}
};

Tendría más sentido para mí de todos modos si hubiera una manera de usar el servicio Nav o NavController desde el ángulo iónico. ¿Hay una manera de hacerlo?

Answer 1

A partir de Ionic 3.6, puede usar el componente de la aplicación para suscribirse a eventos de cambio de página en toda la aplicación, como se documenta en: https://ionicframework.com/docs/api/components/app/App/

Por ejemplo, si desea realizar un seguimiento de cada cambio de vista en Google Analytics utilizando el complemento GA cordova, podría modificar su app.ponent.ts de esta manera:

constructor(private app: App, private platform: Platform, private ga: GoogleAnalytics, ...) {
this.platform.ready().then(() => {
this.ga.startTrackerWithId(''UA-XXX'').then(() => {
this.app.viewDidEnter.subscribe((evt) => {
// evt.instance is the Ionic page component
this.ga.trackView(evt.instance.title);
});
}).catch(e => console.log(''Doh'', e));
}
}

Answer 2

En Ionic2 +, simplemente puede suscribirse al evento en el que desea ejecutar su código de la siguiente manera:

this.navCtrl.ionViewWillUnload.subscribe(view => {
console.log(view);
});

Puedes suscribirte a todos los eventos del ciclo de vida.

Answer 3

Lo primero es que el enrutador está presente en el módulo @angular/router .

Y para escuchar el evento de cambio de ruta, puede colocar la suscripción en el objeto de changes enrutador.

Código

class MyRouteEventClass {
constructor(private router: Router) {
router.changes.subscribe((val) => {
/* Awesome code here */
}
)
}
}

Answer 4

Otra opción sería crear una súper clase en la que pueda usar el método ionViewDidUnload (o cualquier otro gancho del ciclo de vida) como este:

import { Events } from ''ionic-angular'';
export class BasePage {
constructor(public eventsCtrl: Events) { }
ionViewDidEnter() {
this.eventsCtrl.publish(''page:load'');
}
ionViewDidUnload() {
this.eventsCtrl.publish(''page:unload'');
}
}

Luego en cada página solo necesitas extend esa BasePage

@Component({
templateUrl: ''build/pages/my-page/my-page.html'',
})
export class MyPage extends BasePage {
constructor(private platform: Platform,
private nav: NavController,
private menuCtrl: MenuController,
...,
eventsCtrl: Events) //notice that this one does not have the private/public keyword
{
// Due to an issue in angular, by now you must send the dependency to the super class
// https://github.com/angular/angular/issues/5155
super(eventsCtrl);
//...
}

Y luego, puede agregar un método como este en el archivo principal de app.ts para responder a esos eventos:

 private initializeEventHandlers() {
this.events.subscribe(''page:load'', () => {
// your code...
});
this.events.subscribe(''page:unload'', () => {
// your code...
});
}

Answer 5

Puede usar el Javascript antiguo para colocarlo en app.component.ts. Suponiendo que usas Ionic2-RC0:

import { Component } from ''@angular/core'';
import { Platform } from ''ionic-angular'';
import { StatusBar } from ''ionic-native'';
import { YourPage } from ''../pages/yourpage/yourpage'';
@Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = YourPage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
window.addEventListener(''load'', () =>{
console.log(''page changed'');
});
});
}

Cada vez que cambie de página con el NavController, tendrá que page changed impresa en la consola.

Answer 6

Ionic2 no utiliza Angular2''s Router . Tienen su propia implementación NavController .

Veo que puedes suscribirte a los eventos del enrutador Angular 2. ¿Cómo puedo traducir eso para usar en Ionic 2?

Puedes fusionar todos los NavController Events y suscribirte a ellos.

allEvents = Observable.merge(
this.navController.viewDidLoad,
this.navController.viewWillEnter,
this.navController.viewDidEnter,
this.navController.viewWillLeave,
this.navController.viewDidLeave,
this.navController.viewWillUnload);
allEvents.subscribe((e) => {
console.log(e);
});