离子2页面改变事件 [英] ionic 2 page change event

问题描述

我想在每次页面更改时执行一些代码。

I want to execute some code every time the page changes.

我可以添加一个 ngOnDestroy 方法到每一页。看来我可以使用Ionic 2页生命周期钩子（例如 ionViewDidUnload ）效果完全相同，但我没有费心去测试。我宁愿在主应用类中添加一个方法。

I could add add an ngOnDestroy method to every page. It appears that I could use Ionic 2 page lifecycle hooks (e.g. ionViewDidUnload) for the exact same effect, but I haven't bothered to test that.I would rather add a single method to the main app class.

我看到您可以订阅Angular 2 路由器事件。如何翻译用于Ionic 2？我首先从'@ angular / router; 中的 import {Router}收到错误：

I see that you can subscribe to Angular 2 Router events. How do I translate that for use in Ionic 2? I'm getting an error with import { Router } from '@angular/router; in the first place:

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'.

webpack config

webpack config

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"]
  }
};

如果有办法使用离航或 NavController 来自ionic-angular的服务。有没有办法做到这一点？

It would make more sense to me anyways if there is a way to use the Nav or NavController service from ionic-angular. Is there a way to do that?

推荐答案

另一个选择是创建一个超类，你可以使用 ionViewDidUnload 方法（或任何其他生命周期钩子），如下所示：

Another option would be to create a super class where you can use the ionViewDidUnload method (or any other lifecycle hook) like this:

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

Then in every page you just need to extend that 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 文件中添加类似这样的方法来响应这些事件：

And then, you can add a method like this one in the main app.ts file to respond to those events:

  private initializeEventHandlers() {

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

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

  }

这篇关于离子2页面改变事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！