web-dev-qa-db-ja.com

ionic 2ページ変更イベント

ページが変更されるたびにコードを実行したい。

すべてのページにngOnDestroyメソッドを追加できます。まったく同じ効果を得るためにIonic 2ページ ライフサイクルフック （たとえばionViewDidUnload）を使用できるようですが、テストすることはありません。メインのアプリクラスに単一のメソッドを追加したいです。

Angular 2 ルーターイベント にサブスクライブできることがわかります。Ionic 2？I ' mそもそもimport { Router } from '@angular/router;でエラーが発生する：

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

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

Ion-angularからNavまたはNavControllerサービスを使用する方法があれば、とにかく意味があります。それを行う方法はありますか？

angulartypescriptionic-frameworkionic2ionic3
20
jmilloy

Ionic2はAngular2's Routerを使用しません。独自の実装NavControllerがあります。

Angular 2ルーターイベントにサブスクライブできることがわかります。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);
});
11
Ankit Singh

別のオプションは、次のように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 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ファイルに次のようなメソッドを追加して、これらのイベントに応答できます。

  private initializeEventHandlers() {

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

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

  }
11
sebaferreras

Ionic 3.6では、Appコンポーネントを使用して、アプリケーション全体のページ変更イベントをサブスクライブできます。詳細については、 https://ionicframework.com/docs/api/components/app/App /

たとえば、GA cordovaプラグインを使用して、Googleアナリティクスのすべてのビューの変更を追跡する場合、次のように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));
  }
}
10
jean-baptiste

ルーターが@angular/routerモジュール。

そして、ルート変更イベントをリッスンするために、ルーターchangesオブジェクトにサブスクリプションを配置できます。

コード

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

プレーンな古い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コンソールに印刷されました。

5
Mathieu Nls

Ionic2 +では、次のようにコードを実行するイベントにサブスクライブするだけです。

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

すべての Lifecycle Events にサブスクライブできます

2
Dhyey