Ионное изменение на 2 страницы

Ответ 1

Другой вариант - создать суперкласс, где вы можете использовать метод ionViewDidUnload (или любой другой привязку жизненного цикла) следующим образом:

import { Events } from 'ionic-angular';

export class BasePage {

  constructor(public eventsCtrl: Events) { }

  ionViewDidEnter() {
    this.eventsCtrl.publish('page:load');   
  }

  ionViewDidUnload() {
    this.eventsCtrl.publish('page:unload');   
  }
}

Затем на каждой странице вам нужно extend, чтобы 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);

    //...
}

И затем вы можете добавить метод, подобный этому, в основной файл app.ts, чтобы ответить на эти события:

  private initializeEventHandlers() {

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

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

  }

Ответ 2

Ionic2 не использует Angular2 Router. Они имеют собственную реализацию NavController.

Я вижу, что вы можете подписаться на события Angular 2 Router. Как мне перевести это для использования в Ionic 2?

Вы можете объединить все NavController Events и подписаться на него.

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

Ответ 3

Начиная с Ionic 3.6, вы можете использовать компонент App для подписки на события изменения страницы приложения, как описано в документе: https://ionicframework.com/docs/api/components/app/App/

Например, если вы хотите отслеживать каждое изменение в Google Analytics с помощью плагина GA cordova, вы можете изменить свой app.component.ts следующим образом:

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

Ответ 4

1st thing Router присутствует в модуле @angular/router.

И для прослушивания события изменения маршрута вы можете разместить подписку на маршрутизаторе changes.

код

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

Ответ 5

Вы можете использовать простой старый Javascript для размещения в app.component.ts. Предполагая, что вы используете 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');
      });
    });
  }

Каждый раз, когда вы меняете страницу с помощью NavController, у вас будет page changed, напечатанный на консоли.

Ответ 6

В Ionic2 + вы можете просто подписаться на событие, которое вы хотите выполнить, следующим образом:

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

Вы можете подписаться на все События жизненного цикла