Ionic2学习笔记（6）：NAVIGATION

作者：Grey

原文地址： http://www.cnblogs.com/greyzeng/p/5551535.html

?

?
?

?Ionic2中创建一个页面很方便，在页面之间相互切换也很方便，我们在实现如下需求：

在主页面创建一个按钮，点击按钮，跳转到一个新页面，在跳转过程中，我们可以也可以在页面之间传递数据。

  • 进入项目目录：cd MyFirstApp
  • 创建一个新页面：

    ionic g page SecondPage

    将@import "../pages/second-page/second-page.scss";添加到app\themes\app.core.scss中

  • 在主页面app\pages\home\home.html中增加一个按钮，并对这个按钮增加相应的点击事件处理函数openModal()

  • 在app\pages\home\home.ts中，补充这个事件处理函数的内容。我们可以通过:

    this.nav.push(newpage)

    这个方法来跳转到newpage这个页面，同时，我们可以用

    this.nav.push(newpage, { name "grey", job: "IT"});

来向newpage传入一些数据，比如以上表示向newpage传入name="grey", job="IT"，

在newpage中，我们可以通过.navParams.get(‘name‘)和navParams.get(‘job‘)来获取相应的值"grey"和"IT"

app\pages\home\home.ts增加如下代码：

在app\pages\second-page\second-page.ts中，增加如下代码，用于获取从上个页面传来的数据

  • 将传来的数据展示出来：

    app\pages\second-page\second-page.html中：

  • 演示效果: ionic serve -l

    点击按钮:

  • 此外，我们可以在SecondPagePage中增加一个返回到主页的按钮，

    app/pages/second-page/second-page.html

    在app/pages/second-page/second-page.ts中增加一个处理返回的事件函数：this.nav.pop()

  • 演示效果：ionic serve -l

    点击Back按钮，返回主页面

    ?

------

上一篇：Ionic2学习笔记（5）：Provider

时间： 2024-08-26 08:29:06

Ionic2学习笔记（6）：NAVIGATION的相关文章

Ionic2学习笔记（7）：Input

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html ? ? ? 我们先来看一个简单的输入用户名和密码点击登录的界面: ? 进入项目目录:cd MyFirstApp 修改主页代码: app/pages/home/home.html 预览一下效果:ionic serve -l 我们有两种方式来获取输入的数据: ? 第一种:通过[(ngModel)]来获取参数值,修改home.html的代码为如下形式 在home.ts增加一个获取用

Ionic2学习笔记（10）：扫描二维码

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016 ? ? 说明: 在本文发表的时候(2016-06-11),Ionic2是beta版本,所有还是会有一些改动比较大的地方: 点击查看 , 比如beta8版本(2016-06-06),相较于前面的版本就有一个特别大的改动的地方: @App and @Page should be replaced with @Component 基于这种情况,大家还是静静

Ionic2学习笔记（8）：Local Storage& SQLite

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html ? ? ? ? ?Ionic2可以有两种方式来存储数据,Local Storage和SQLite ? LocalStorage ? 因为比较容易访问,所以不适合存比较敏感性的数据 比如可以存储: 用户是否登录的信息. 一些session信息等 具体用法: 进入项目目录:cd MyFirstApp 在主页设置一个按钮,点击按钮,获取LocalStorage的数据并打印在控制台

Ionic2学习笔记（3）：Pipe

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5538630.html ? ? ? ? ? ? Pipe类似过滤器,比如,在一个字符串要展现在页面之前, 我们需要对这个字符串进行一些操作,比如:将字符串转化为大写,加一个前缀/后缀-- Pipe的作用就是来实现类似的需求: 模型如下: ? ? ? 假设一个字符串: "hello", 我们在展示这个字符串的时候,需要先转换为大写, 然后加一个后缀 " WORLD", 最

Ionic2学习笔记（9）：访问本地设备

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html ? ? ? ? Ionic2提供了访问本地设备的方法,但是需要安装Cordova依赖,我们以调用摄像头拍照为例来说明: 进入项目目录:cd MyFirstApp npm install ionic-native –save 增加调用Camera的插件:ionic plugin add cordova-plugin-carmera 在Home.html中,增加如下代码: 点击b

Ionic2学习笔记（3）：*号

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html ? ? ? ? ? ? 大家常常会在ionic2页面中见到*号的存在,如: <p *ngIf="someBoolean"><p> 含义与: <template [ngIf]="someBoolean"> <p></p> </template> 一样, 即:如果someBool

Ionic2学习笔记（5）：Provider

作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html ? ? Provider是一种为App提供数据源的方式, 举个例子: 我们从: https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot 获取Json格式的数据,并在程序启动的时候,在控制台打印获取的数据信息: 进入项目目录:cd MyFirstApp 创建一个Provider:ionic g provider New

Ionic2学习笔记

Component nav: <ion-nav [root] = 'rootComponent'></ion-nav> ....import {Nav} from 'ionic-angular';.... export class AppComponent{ @ViewChild(Nav) private nav:Nav; push(){ nav.push(PageOne,{id:1,name:'ztw'}); } } @Component({template:`<p>

Sharepoint学习笔记—ECM系列—文档列表的Metedata Navigation与Key Filter功能的实现

如果一个文档列表中存放了成百上千的文档,想要快速的找到你想要的还真不是件容易的事,Sharepoint提供了Metedata Navigation与Key Filter功能可以帮助我们快速的过滤和定位我们想要查找的文档. 效果如下: 下面我们来看看如何设置实现这个功能. 1.打开你想要操作的文档库,点击此库的Library选项页及其Library Settings按钮 点击此Ribbon上的Library Setting按钮 2.在文档库的管理页面的Gegeral Settings栏,找到Met