ionic3懒加载和DeepLinker

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

1、懒加载

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

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

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