鏈接：
ionic3 教程（一）安裝和配置
ionic3 教程（二）登錄頁制作
ionic3 教程（三）設置頁制作
ionic3 教程（四）安卓硬件返回鍵處理
ionic3 教程（五）基本的網(wǎng)絡請求

現(xiàn)在大部分 App，都會有自己的設置頁（個人信息頁），里面會包含個人資料、設置、退出登錄等功能。這一回我們就在制作一個個人信息頁。

1.刪除 ContactPage 和 AboutPage

首先刪除文件，然后刪除 app.module.ts 中的引用，最后刪除 Tabs.ts 中的引用。如果刪除后運行不了就再檢查一下或者重新運行一下，你做項目的時候遲早會遇到需要刪文件的情況。

2.添加設置頁面

• 添加設置頁

  ionic g page Setting

• 在app.module.ts中import，并分別寫到declarations和entryComponents中。

• 在 tabs.ts 中引入，并在 tabRoots 中插入這段代碼

  {
    root: SettingPage,
    tabTitle: '設置',
    tabIcon: 'person'
  }
  

Title 是標題，這里的 tabIcon 用的是 ionic 提供的默認圖標，圖標大全請看
https://ionicframework.com/docs/ionicons/ （最新）
http://ionicons.com/ （已過時）

icon.png

使用時直接輸入左邊的 Name 值即可。

3.制作設置頁內(nèi)容

打開 setting.html，輸入以下代碼

    <ion-header>
        <ion-navbar>
            <ion-title>
                更多
            </ion-title>
        </ion-navbar>
    </ion-header>

    <ion-content class="bg-color">
        <ion-list class="top-list">
            <button ion-item [navPush]="userInfoPage">
                <ion-avatar item-left>
                    [圖片上傳失敗...(image-c93b50-1513351069560)]
                </ion-avatar>
                <h2>devilx</h2>
                <p>賬號：18600001111</p>
            </button>
        </ion-list>

        <ion-list>
            <ion-item>
                控件1
            </ion-item>
            <button ion-item>
                控件2
            </button>
            <button ion-item>
                <ion-avatar item-left>
                    [圖片上傳失敗...(image-55ea8-1513351069560)]
                </ion-avatar>
                控件3
            </button>
        </ion-list>

        <ion-list>
            <button ion-item>
                版本號
                <span  item-end>V1.0</span>
            </button>
            <button ion-item>
                關于
            </button>
        </ion-list>

        <div style="text-align: center; margin-left: 30px; margin-right: 30px;margin-top: 30px;">
            <button ion-button block (click)="logOut()">
                退出登錄
            </button>
        </div>
    </ion-content>

打開setting.scss，輸入以下代碼

page-setting {
  .toolbar-title-md{
    text-align: center;
  }

  .scroll-content{
    overflow: hidden;
  }

  .bg-color{
    background-color: #efeeee;
  }

  .top-list{
    margin-top: 15px;
  }
}

運行效果如圖所示（我這里使用了 http://localhost:8100/ionic-lab，所以展示的是 iOS 的效果）：

設置頁.png

這一段我多展示了幾種效果，代碼自行理解加深以下印象。

4.制作退出登錄功能

首先我們需要回到 login.ts，把跳轉方式改一下，因為如果使用 push 的方法進行跳轉，即使你隱藏了返回按鈕，安卓手機也是可以使用返回鍵跳回上一個頁面的。所以我們要使用另一種跳轉方式

進入 login.ts，引入 ModalController，刪除無用的引用，如下

import { Component } from '@angular/core';
import { IonicPage, ModalController} from 'ionic-angular';
import { TabsPage } from "../tabs/tabs";

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public modalCtrl: ModalController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  logIn(username: HTMLInputElement, password: HTMLInputElement) {
    if (username.value.length == 0) {
      alert("請輸入賬號");
    } else if (password.value.length == 0) {
      alert("請輸入密碼");
    } else {
      let userinfo: string = '用戶名：' + username.value + '密碼：' + password.value;
      alert(userinfo);
      let modal = this.modalCtrl.create(TabsPage);
      modal.present();
    }
  }

}

然后到 Setting.ts 頁面，改為以下代碼

import { Component } from '@angular/core';
import { IonicPage, ModalController } from 'ionic-angular';
import { LoginPage } from "../login/login";

@IonicPage()
@Component({
  selector: 'page-setting',
  templateUrl: 'setting.html',
})
export class SettingPage {

  constructor(public modalCtrl: ModalController) {
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad SettingPage');
  }

  logOut() {
    let modal = this.modalCtrl.create(LoginPage);
    modal.present();
  }

}

OK，退出登錄功能制作完成，這一節(jié)到此結束。

Demo下載地址

追加

最近有朋友提問說，跳轉到 tabs 頁再回登錄頁會無限進入。這里提供一個解決方案。push 后再刪除之前頁面即可。

this.navCtrl.push(TabsPage).then(() => {
  const startIndex = this.navCtrl.getActive().index - 1;
  this.navCtrl.remove(startIndex, 1);
});