鏈接：
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/ （已過時）
使用時直接輸入左邊的 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 的效果）：
這一段我多展示了幾種效果静袖，代碼自行理解加深以下印象。
4.制作退出登錄功能
首先我們需要回到 login.ts俊扭，把跳轉(zhuǎn)方式改一下队橙，因為如果使用 push 的方法進行跳轉(zhuǎn)，即使你隱藏了返回按鈕，安卓手機也是可以使用返回鍵跳回上一個頁面的捐康。所以我們要使用另一種跳轉(zhuǎn)方式
進入 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下載地址
追加
最近有朋友提問說，跳轉(zhuǎn)到 tabs 頁再回登錄頁會無限進入劳翰。這里提供一個解決方案隙疚。push 后再刪除之前頁面即可。
this.navCtrl.push(TabsPage).then(() => {
const startIndex = this.navCtrl.getActive().index - 1;
this.navCtrl.remove(startIndex, 1);
});