Ionic3 导航分析

spilledyear

发布于 2018-08-21 15:00:41

2K0

发布于 2018-08-21 15:00:41

文章被收录于专栏：小白鼠小白鼠

在刚接触ionic的时候，我觉得导航不太好理解，主要是ionic的导航方式和我们之前接触的路由导航方式不太一样。之前接触的路由，基本上都是根据不同的url加载不同的内容，比如最基本的，根据url的不同加载不同的html文件；或者像React中根据不同的url加载不同的组件，这种导航方式很直接，也非常方便理解。但ionic的导航系统使用起来感觉不是这样的，或许原理是类似的吧，但这里只讨论ionic中导航的使用。本文将通过一个例子，讲解ionic中导航的使用。基本流程如下：登录》 tabs 》退出重新到登录
效果图首次登录

登录之后进入到tabs界面

点击退出功能重新回到登录界面

image.png

uiRouter

路由是前端构建单页面应用(SPA)必不可少的一部分，AngularJS1.x中有两种路由实现，一个是内置的ngRouter，还有一个是基于 ngRoute 开发的第三方路由模块uiRouter。这里为什么要提uiRouter？因为就自我感觉而言uiRouter 和 ionic导航在使用方式上有点像，特别是从它们提供的指令这一层来考虑。如果你没有了解过Angular4中的路由，其实也可以简单看看uiRouter的使用，不需要了解的多详细，仅仅理解它的那个指令的使用方式就可以了。

ui-router官网

有关于uiRouter更详细的介绍，可以看看这篇文章 Angular导航点击对应链接，触发 $state.go('x'x'x') 方法，uiRouter根据state找到对应的视图并加载在ui-view容器中，实现界面的变化。一定要注意，是将视图模板加载到 ui-view容器中，没有ui-view容器，是不能够显示对应的模板内容的。

NavController

ionic中的导航也是类似的，至少从指令这一层次来讲基本上类似的。在uiRouter中，通过<ui-view>这个指令来展示内容，也就可以将<ui-view>看作是一个容器，好了这个容器，uiRouter没办法将内容展示到界面。而ionic中也有一个类似的指令<ion-nav>。<ion-nav> 在ionic中就是一个内容的容器，没有这个容器什么也看不到，<ion-nav> 可以覆盖在 <ion-nav> 上面，可以通过给 <ion-nav> 添加唯一标识来区别多个<ion-nav>。而对于界面的跳转，Ionic提供了一套自己的API，最常用的就是NavController，这个类中几乎包含了与导航有关的所有方法，通过这个接口可以满足绝大部分需求。总的来说就是：<ion-nav> 是界面的容器，然后通过NavController提供的API实现界面的跳转，从而实现导航效果。

实现过程

从整体上来看，有两个界面：登录界面、Tab界面。其中登录界面作为一个独立的界面，tab界面中的某个tab上有退出当前用户功能，退出之后重新跳回到登录界面，很常见的一个流程。

登录界面

Tab界面，其中在Person这个tab页面有退出登录功能

主要代码

app.html 。可以把这里当作是整个应用的起点，也就是说在 app.html中必须要有一个<ion-nav> ，并且是作为整个应用的根 <ion-nav>。

<ion-nav [root]="rootPage" ></ion-nav>
//代码只有一行，其中 root 是 <ion-nav>中的一个属性指令，它的值是对应的一个 组件，但是 ionic3中支持懒加载，所以可以是一个字符串(有关于懒加载具体的可以看Angular和ionic的文档)

//root 表示的是默认加载的界面，也就是应用一启动就加载哪个界面

app.component.ts 。只结束一些主要的逻辑，我们希望实现这样的功能：当用户已经登录了，点开应用的时候跳到tab界面，没有登录的时候，点开应用跳到登录界面。!this.nativeService.isLogin(false) 是我自己实现的一个函数，用于判断用户是否登录。

// 加载tabs页面之前先判断是否登录（就是进入系统时展示登录界面）
if (!this.nativeService.isLogin(false)) {
  this.rootPage = 'LoginPage';
} else {
  this.rootPage = 'TabsPage';
}

  //在构造函数中注入了 NavController
  constructor(private navCtrl: NavController,
              private navParams: NavParams,
              private formBuilder: FormBuilder,
              private viewCtrl: ViewController,
              private events: Events,
              private httpService: HttpService,
              private storageService: StorageService,
              private nativeService: NativeService) {
  }

  login(value) {
    this.nativeService.showLoading('loading...');

    this.httpService.login('/oauth/token', value).then(result => {
      if (!result || !result.access_token) {
        this.nativeService.alert(result.message, '登录失败');
        this.storageService.remove(ACCESS_TOKEN);
        return;
      }

      this.storageService.write(ACCESS_TOKEN, result.access_token);

      this.navCtrl.setRoot('TabsPage');
    }).catch(error => {
      DEBUG && console.log('访问错误：' + error);
      this.nativeService.hideLoading();
      this.nativeService.showToast('用户名或密码错误');
    });
  }

仅仅点击登录这部分功能。登陆成功后，先将ACCESS_TOKEN(可用于判断用户是否登录)存到localstorage中，然后执行界面跳转。界面跳转的实现代码如下：

this.navCtrl.setRoot('TabsPage');

表示将 TabsPage 设置为整个应用的跟界面，也就是说将 TabsPage 代表的界面放到 app.html中的<ion-nav>容器中。

tabs.html。这个界面中用到了ionic提供的 <ion-tabs>组件，这是ionic封装好的，直接用就可以了。

<ion-tabs #mainTabs>
  <ion-tab [root]="HomePage" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab root="ExamplePage" tabTitle="Example" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="PersonalPage" tabTitle="Personal" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="SegmentsPage" tabTitle="Segments" tabIcon="contacts"></ion-tab>
</ion-tabs>

可以看到在<ion-tabs>下面有4个tab，表示我们在上面图片中看到的4个tab界面。

接下来重点看看退出登录那个Tab界面 personal.html。只有一个按钮，点击退出当前账号

<ion-header>
  <ion-navbar>
    <ion-title>personal</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-item (click)="exitSoftware()" hideWhen="ios" detail-none>
    <ion-icon name="log-out" item-left color="danger"></ion-icon>
    退出当前账号
  </button>
</ion-content>

personal.ts。对应的退函数如下，点击退出的时候，先弹出一个提示框，当用户确定退出的时候，清除localStorage里面的信息，然后跳转到登录界面。

  exitSoftware() {
    this.alertCtrl.create({
      title: '确认退出？',
      buttons: [{text: '取消'},
        {
          text: '确定',
          handler: () => {
            localStorage.clear();
            this.navCtrl.parent.parent.setRoot('LoginPage');
            // this.platform.exitApp(); 杀死app进程
          }
        }
      ]
    }).present();
  }

这里有一行代码需要注意

 this.navCtrl.parent.parent.setRoot('LoginPage');

这行代码代表什么意思呢？this.navCtrl.parent 代表当前<ion-nav>的父级<ion-nav>，this.navCtrl.parent.parent就代表父级的父级。含义已经知道了，但是为什么要这样写呢？刚刚在前面已经说过，一个 <ion-nav> 可以覆盖在另外一个 <ion-nav> 上面，被覆盖方作为父级，覆盖方作为子级。有人可能会说，这里并没有用到<ion-nav> ，是的，可是这里用到了<ion-tabs>，这两者的功能是类似的，从代码中也可以看出来，都有一个root属性。并且<ion-tabs>就相当于是<ion-tab>的父级。所以，根据以上的特性就可以分析出来，在 personal.ts 中，this.navCtrl 代表就是当前的那个Tab，叶就是

<ion-tab [root]="PersonalPage" tabTitle="Personal" tabIcon="contacts"></ion-tab>

也就是说 this.navCtrl.parent 代表的是 <ion-tabs>。然后，<ion-tabs> 依附在 app.html中的 <ion-nav>上，所以 this.navCtrl.parent .parent代表的就是 app.html中的 <ion-nav>，也就是整个应用的根 <ion-nav>。this.navCtrl.parent.parent.setRoot('LoginPage')，/就是将该应用的根 <ion-nav> 展示界面设置为 LoginPage。

如果你不这么做，而是在 personal.ts 中直接setRoot

  exitSoftware() {
    this.alertCtrl.create({
      title: '确认退出？',
      buttons: [{text: '取消'},
        {
          text: '确定',
          handler: () => {
            localStorage.clear();
            this.navCtrl.setRoot('LoginPage');
            // this.platform.exitApp(); 杀死app进程
          }
        }
      ]
    }).present();
  }

你会看到这样的结果：登录界面依附在 tabs 上，这显然不是我们需要的结果