当前位置: 首页 > 知识库问答 >
问题:

Ionic 2页面更改事件

司徒正信
2023-03-14

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

我可以在每个页面中添加一个Ngondestory方法。似乎我可以使用Ionic 2页面生命周期挂钩(例如,Ionic 2页面生命周期挂钩,Ionic 2页面生命周期挂钩,Ionic 2页面生命周期挂钩,Ionic 2页面生命周期挂钩,Ionic 2页面生命周期挂钩,Ionic 2页面生命周期挂钩,Ionic 2页面生命周期挂钩,Ionic 2页面生命周期挂钩,Ionic 2页面生命周期挂钩。我宁愿向主应用程序类添加一个方法。

我看到您可以订阅Angular 2路由器事件。如何将其翻译为在Ionic 2中使用?我收到来自'@角/路由器的导入{路由器}的错误;首先:

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

网页包配置

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

如果有办法使用爱奥尼亚angular的导航或导航控制器服务,对我来说就更有意义了。有没有办法做到这一点?

共有3个答案

翟元凯
2023-03-14

从Ionic 3.6开始,您可以使用应用程序组件订阅应用程序范围的页面更改事件,如中所述:https://ionicframework.com/docs/api/components/app/App/

例如,如果您想使用GA cordova插件跟踪Google Analytics中的每个视图更改,您可以这样修改您的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));
  }
}
沈德寿
2023-03-14

另一种选择是创建一个超类,您可以在其中使用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');   
  }
}

然后在每个页面中,您只需要扩展那个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);

    //...
}

然后,您可以在主应用程序中添加这样的方法。ts文件以响应这些事件:

  private initializeEventHandlers() {

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

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

  }
富凯风
2023-03-14

Ionic2不使用Angular2的路由器。他们有自己的实现NavController

我看到您可以订阅Angular 2路由器事件。如何将其转换为在Ionic 2中使用?

您可以合并所有NavController事件并订阅它。

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);
});
 类似资料:
  • 我想将我的导航从透明背景更改为白色背景。导航应该缩小,徽标应该消失。 它应该与此页面上的完全相同:https://www.praxis-loeber.de 我已经为它编写了jQuery代码,但不幸的是,它仍然不起作用。 如果有人能告诉我错误在我的代码中,我会非常高兴。 这是我的代码:

  • 问题内容: 这有可能吗? 这是问题所在: 我有一个使用此URL的关键字搜索(搜索后):http:// localhost / thi / search?keyword = key 然后我有一个使用AjaxForm插件(jquery)的滑块搜索… 当我执行滑块搜索时,显然我仍然会在关键字搜索URL中(因为请求是通过ajax发送的) 有没有办法将当前网址更改为类似http:// localhost /

  • 我正在尝试以编程方式更改页面。这第一行代码正在工作,但我不需要它延迟,所以我尝试了第二行,但它不起作用。我错过了什么? 工作(但我不想延迟): 不工作: 我在<代码>中调用它

  • 本文向大家介绍Ionic2系列之使用DeepLinker实现指定页面URL,包括了Ionic2系列之使用DeepLinker实现指定页面URL的使用技巧和注意事项,需要的朋友参考一下 Ionic2使用了近似原生App的页面导航方式,并不支持Angular2的路由。这种方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面就有点问题了,这种情况下Angular2的router可以提供更灵活

  • 问题内容: 我正在为某个网站编写Greasemonkey脚本,该脚本有时会进行修改。 在页面上进行更改时,如何获取事件(通过或类似方式)?我还需要访问指向新的/修改的URL的文档的DOM。 我看到了其他涉及超时和轮询的解决方案,但如果可能的话,我想避免这种情况。 问题答案: popstate事件: 当活动历史记录条目更改时,将触发popstate事件。[…]popstate事件仅通过执行浏览器操作

  • 问题内容: 如何检测textField中的任何文本更改?委托方法适用于某些东西,但不能完全满足我的需要。因为直到返回YES,否则textField文本不可用于其他观察者方法。 例如在我的代码中没有得到更新的文本,用户已经输入了。 他们获得Java事件处理程序之类的方法是什么。 问题答案: 从正确的方式做uitextfield文本更改回调: 我捕获了发送到UITextField控件的字符,如下所示: