前言

已经学了Tabs,Tab,Button,Input,组件，现在就可以做一个简单的Login页面了

新增一个Tab页

新增一个tab页需要做以下几步操作：

增加标签

在pages文件夹下分别增加login.html,login.ts和login.scss三个文件

在login.ts页面中写入以下代码:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

selector:'login-page',

templateUrl:'login.html'

})

export class LoginPage {

constructor(public NavCtrl:NavController){

}

}

4. 在app/app.module.ts中做以下修改

先在头部引入login

``` typescript

import { LoginPage } from '../pages/login/login';

在declarations中增加LoginPage,同时在entryComponents中增加entryComponents

在tabs.ts中做以下修改:

在头部导入login

import { LoginPage } from '../login/login';

在TabsPage中增加：

tabLogin:any = LoginPage;

现在login这个tab页就增加好了

login的前台页面

代码如下：

Login In Page

UserName

Password

Login

上述代码中的(click)和[(ngModel)]均为angular2的使用方式。

login页面的后台代码

代码如下：

import { Component } from '@angular/core';

import { NavController,LoadingController } from 'ionic-angular';

import { HomePage } from '../home/home';

@Component({

selector:'login-page',

templateUrl:'login.html'

})

export class LoginPage {

constructor(public NavCtrl:NavController,public LoadCtrl:LoadingController){

}

userInfo:UserInfo={

UserName:'liuzhuang',

PassWord:'111111'

}

loadDefault(){

let loading = this.LoadCtrl.create({

content:"loading...",//loading框显示的内容

dismissOnPageChange:true, // 是否在切换页面之后关闭loading框

showBackdrop:false 是否显示遮罩层

});

loading.present();// 弹出load框

setTimeout(()=>{

this.NavCtrl.push(HomePage);//跳转页面

},1000);

setTimeout(()=>{

loading.dismiss();

},3000);

// 上面这段代码先是在按下按钮1000毫秒之后挑战页面，再在3000毫秒之后关闭loading框

// 但是因为设置了切换页面之后关闭loading框，因此在切换页面后则关闭loading框

}

loadCustom(){

let loading = this.LoadCtrl.create({

spinner:"dots",// apinner既是loading框上的图标

// content:`

`,

duration:5000 // loading框持续的时间，默认在触发DidDismiss之后关闭，除非设置了该属性

});

loading.onDidDismiss(()=>{

console.log("Dismissed loading");

});

loading.present();

}

loadText(){

let loading = this.LoadCtrl.create({

spinner:"hide",

content:"loading",

duration:3000

});

loading.present();

}

btnClick(){

this.loadDefault();

// this.loadText();

// this.loadCustom();

}

}

export class UserInfo{

UserName:string;

PassWord:string;

}

上述代码主要有以下几个组成部分：

声明了UserInfo类

声明了UserInfo类的实例userInfo，并赋予初值，同时实现和前台两个input双向数据绑定

初始化loading controller

源码