ionic3 （三）设置页制作

现在大部分 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 提供的默认图标，图标大全请看这里，点击里面的图标，就会弹出对应的字符串。如图;

这里我们必须去掉前面的 ion- 前缀才可以使用。

3.制作设置页内容

---

打开 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>        <img src="./assets/icon/user.jpg">      </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>        <img src="./assets/icon/user.jpg">      </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，把跳转方式改一下，因为如果使用 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，退出登录功能制作完成

Demo地址