ionic3懒加载和DeepLinker

ionic3默认使用NavController实现页面跳转切换,且url不变。有时候我们需要直接用网址打开一个页面。
那么可以有两种方式,DeepLinker和懒加载。
Angular中懒加载的配置,需要在Routes中配置好loadchildern的对应的模块的相对路径,然后在子模块的路由中配置子模块中的路由映射。好处是模块化设计,模块的加载和卸载比较方便。

1、懒加载

ionic3中的懒加载是直接对Page进行设置,只需要简单3不就能完成,操作更加简单。

注意:这里之前被cnpm i坑到怀疑人生。node_module务必要使用npm i来进行安装。之前使用cnpm安装了依赖后,下面代码死活运行不成功。报错找不到模块。


ionic3懒加载和DeepLinker_第1张图片
image.png

第一步:page1.ts中添加ionicpage装饰器

//@IonicPage()//默认name:"Page1Page",segment:"page1"
@IonicPage({
  name: "mypage1",
  segment: 'detail/:id'
})

第二步:page1.module.ts中添加entryComponents的配置

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Page1Page } from './page1';

@NgModule({
  declarations: [
    Page1Page,
  ],
  imports: [
    IonicPageModule.forChild(Page1Page),
  ],
  entryComponents: [
    Page1Page
  ]
})
export class Page1PageModule { }

第三步:调用

  GO() {
    this.navCtrl.push("mypage1", { id: 100 });
  }

那么在前台点击按钮,调用GO方法的时候,就会打开http://localhost:8100/#/detail/100。直接打开这个网址,也会打开这个页面。这样就实现了懒加载。
官方教程:https://ionicframework.com/docs/api/navigation/IonicPage/

2、DeepLink

使用DeepLink会比较麻烦,每次需要给页面配置网址,需要在app.module.ts中添加一条记录。
实现跳转到指定Tab
修改app.module.ts文件,将IonicModule.forRoot方法改为如下代码:

IonicModule.forRoot(MyApp, {}, {
      links: [
         { component: TabsPage, name: 'Tabs', segment: 'tabs/:tabId' }
      ]
    })

这里的意思是,给Tabs页传一个参数,如http://examplesite/#/tabs/1,这样就让App直接跳到第二个Tab。
修改tabs.ts文件,改为如下代码:

export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;
  public tabId: number;
  public selectTabIndex: number;
  constructor(public params: NavParams) {
    
    this.tabId = params.get("tabId");
    if(this.tabId != undefined || this.tabId !=null)
    {
      this.selectTabIndex = this.tabId;
    }
    
  }
}

添加了两个变量,然后通过NavParams取得传递过来的参数并赋值给selectTabIndex。
修改tabs.html,给Tabs组件添加一个绑定:


运行ionic serve命令,会自动打开http://localhost:8100/地址,现在打开一个新窗口,输入http://localhost:8100/#/tabs/1,OK,直接跳到第二个Tab了。

默认历史

还有一种情况,如果从其他页面直接导航到内部的页面,当点击返回的时候,该返回哪个页面呢?比如从推送通知进到新闻详情页面,当点击返回的时候,应该返回首页。所以Ionic2提供了defaultHistory参数,如果页面历史堆栈中不存在历史页面的时候,就会返回到这个页面。用法如下:

links: [
  { component: HomePage, name: 'Home', segment: 'home' }
  { component: DetailPage, name: 'Detail', segment: 'detail/:user', defaultHistory: [HomePage] }
]

你可能感兴趣的:(ionic3懒加载和DeepLinker)