文档章节

Ionic 2基础知识之导航

昌伟兄
 昌伟兄
发布于 2017/03/03 12:56
字数 692
阅读 31
收藏 0

基本导航

所谓导航,是指从一个页面进入另一个页面,也可以返回。在Ionic 2中,我们使用NavController来实现导航。下面通过一个实例来说明:
1.新建一个空的Ionic 2项目navigation:
ionic start navigation blank --v2 --skip-npm
cnpm install //根据package.json,安装依赖模块
2.增加一个新的页面Second,我们要做的就是从Home页进入到Second页:
ionic g page Second
这样,我们可以看到在src/pages目录下增加了一个新的目录second,其中包括三个文件,分别是second.html、second.scss和second.ts。
3.修改src/app/app.module.ts文件,将新增加的页面加入进去:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SecondPage } from '../pages/second/second'; //新增加的

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SecondPage //新增加的
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SecondPage  //新增加的
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

尤其要注意,每当增加一个页面时,都要修改app.module.ts文件中的三个地方:import、declarations和entryComponents。
4.修改src/pages/home目录中的home.html文件,增加一个按钮:

<ion-header>
  <ion-navbar>
    <ion-title>
      导航演示
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button color="primary" (click)="myNavigation()">导航</button>
</ion-content>

5.修改src/pages/home目录中的home.ts文件,添加按钮单击函数:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../second/second';  //新增加的
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) { }
  myNavigation(){ //新增加的按钮单击函数
    this.navCtrl.push(SecondPage);
  }
}

这样,我们就完成了一个最简单的页面之间的导航,在home页面单击"导航"按钮,就进入了第二个页面,并且有一个back按钮,单击它,就可以返回到home页面。

页面之间传递数据

我们通过NavParams进行页面之间的数据传递。修改上一个例子,在home页中,添加两个输入框,分别用来输入用户名和密码,点击提交按钮后,将输入框中输入的内容传递给下一个页面,并在页面中显示出来。
home.html代码:

<ion-header>
  <ion-navbar>
    <ion-title>
      传递数据
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label fixed>用户名</ion-label>
      <ion-input [(ngModel)]="username" type="text" value=""></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>密码</ion-label>
      <ion-input [(ngModel)]="password" type="password"></ion-input>
    </ion-item>
  </ion-list>
  <button ion-button color="primary" (click)="ok()">提交</button>
</ion-content>

home.ts代码:

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

import { NavController } from 'ionic-angular';
import { SecondPage } from '../second/second';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  username:any;
  password:any;
  constructor(public navCtrl: NavController) { }
  ok(){
    this.navCtrl.push(SecondPage,{
        username:this.username,
        password:this.password
    });
  }
}

second.html代码:

<ion-header>
  <ion-navbar>
    <ion-title>得到数据</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <strong>用户名是:</strong>{{username}}
    </ion-item>
    <ion-item>
      <strong>密码是:</strong>{{password}}
    </ion-item>
  </ion-list>
</ion-content>

second.ts代码:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
  selector: 'page-second',
  templateUrl: 'second.html'
})
export class SecondPage {
  username:any;
  password:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {}
  ionViewDidLoad() {
    this.username=this.navParams.get('username');   
    this.password=this.navParams.get('password');  
  }
}

© 著作权归作者所有

昌伟兄
粉丝 14
博文 12
码字总数 11956
作品 0
楚雄
后端工程师
私信 提问
ionic入门之AngularJS扩展(一)//HTML5移动开发

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生A...

秦无炎
2016/12/20
41
0
ionic入门之AngularJS扩展

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生A...

笔阁
2015/05/04
8.4K
4
(4)增加页面

在app/app.html中,我们看到了这样一行代码 <ion-nav #content [root]="rootPage"></ion-nav> 注意 [root] 属性的绑定,它声明了 ion-nav 控制的root页面:当导航控制器被加载后, rootPage 组件......

boogoogle
2015/12/01
427
0
(1)ionic2的新特性

ionic2的新特性 ionic2是基于Angular2构建的.相对与ng1,ng2几乎是完全的推倒重建的新框架. 虽然Angular原有的部分仍然在新版本中得以保留,但是开发者必须注意那些新的语法和结构变化.你可以通...

boogoogle
2015/11/27
3.8K
0
使用 Angular2 和 Ionic3 开发 iOS 应用

使用 Angular2 和 Ionic3 开发 iOS 应用 虞 里杉 2018 年 1 月 10 日发布 从 Angular1 到 Angular2 Angular2 作为著名前端 MVVM 架构 Angular1 的继承者,从一定程度上说,引领了新一代 Web ...

虞 里杉
2018/01/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

DevOps是如何实现效率的提升?

随着企业业务对软件系统日益依赖,IT管理与研发模式也随之对“敏态”模式产生了需求,也就是今天时常提起的DevOps。提升效率,是DevOps实践的核心内容之一。就让我们来一起从软件生命周期的业...

嘉为科技
29分钟前
3
0
总结:linux目录之proc

我们系统大部分的基础数据采集,其实就是读取proc目录下的文件,并解析获取数据的过程。 1、如cpu利用率:直接cat /proc/cpuinfo命令,然后获取输出内容,并解析里面的数据,如cpu核数等; ...

浮躁的码农
31分钟前
3
0
比原Bapp红包应用

喜迎国庆期间,比原链在自己的移动端钱包Bycoin(下载地址)和google插件钱byone中推出了红包应用,在国庆期间深受大家好评。 那我们今天就来大概介绍一下比原红包,以及基于比原链开发dapp应用...

比原链Bytom
32分钟前
3
0
Linux中没有rc.local文件的解决方法

Linux中没有rc.local文件的解决方法是什么呢?这应该是很多工程师比较头疼的问题,下面就给大家例举几个解决办法。 比较新的Linux发行版已经没有rc.local文件了。因为已经将其服务化了。 解决...

xiangyunyan
33分钟前
2
0
数据中台在阿里巴巴集团内部的实践情况

作者:品鉴 数据中台门在阿里巴巴集团干什么的,由哪个部门掌管?数据中台在阿里巴巴的主要作用是什么呢?外面吹嘘这么神秘的数据中台在阿里实践的如何呢?今天小编正好要采访数据技术及产品...

阿里云官方博客
33分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部