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);
});