OnsenUI-页面切换

效果：页面testone跳转到页面testtwo

1.testone.component.html和testone.component.ts

<ons-page><ons-toolbar><div class="center">testone</div></ons-toolbar><ons-button (click)="gototesttwo()">go to testtwo</ons-button>
</ons-page>

import { Component, OnInit } from '@angular/core';
import { OnsNavigator, Params } from 'ngx-onsenui';
import { TesttwoComponent } from '../testtwo/testtwo.component';@Component({selector: 'ons-page[testone678]',templateUrl: './testone.component.html',styleUrls: ['./testone.component.css']
})
export class TestoneComponent implements OnInit {constructor(private navigator: OnsNavigator,// private params:Params,) { // console.log(JSON.stringify(params.data));}ngOnInit() {}gototesttwo(){//data是跳转页面时传递的参数，可在目标页面用Params接收this.navigator.element.pushPage(TesttwoComponent,{data: {param1:'jj',param2:'yy'}});}
}

页面testone

2.testtwo.component.html和testtwo.component.ts

<ons-page><ons-toolbar><div class="center">testtwo</div></ons-toolbar><ons-button (click)="gototestone()">go to testone</ons-button>
</ons-page>

import { Component, OnInit } from '@angular/core';
import { Params, OnsNavigator } from 'ngx-onsenui';
import { TestoneComponent } from '../testone/testone.component';@Component({selector: 'ons-page[testtwo987]',templateUrl: './testtwo.component.html',styleUrls: ['./testtwo.component.css']
})
export class TesttwoComponent implements OnInit {constructor(private params: Params,// private navigator: OnsNavigator,) {//打印出接收的参数paramsconsole.log(JSON.stringify(params.data));}ngOnInit() {}gototestone() {// this.navigator.element.pushPage(TestoneComponent,{data: {param3:'yy',param4:'jj'}});}
}

切换后

注释打开后可以来回切换

OnsenUI-页面切换相关推荐

Windows Phone 7编程学习点滴一——页面切换、返回键重载和工具栏
1. 页面切换和对齐方式 2 (1)XAML实现方式 <HyperlinkButton Content="TestPage1" NavigateUri="/Test ...
UIView的AddChildViewCtroller的用法（4中页面切换方式）
UIView的AddChildViewCtroller的用法 ---子控制器视图的切换一.视图控制器的4种切换方式 1.使用presentViewController方法进行切换适合于顺序型的页面 ...
设计点击左侧切换页面进出_Axure教程：（初级）导航中的页面切换
本文给大家讲讲如何利用Axure进行导航中的页面切换,一起来看看~ 一.页面布局 (1)从左侧元件库拉入两个矩形作为导航按钮,分别命名为:页面1.页面2. (2)从左侧元件库拉入一个动态面板作为页面内 ...
AngularJs应用页面切换优化方案
前言 AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验.Angular的ngView及其对应的强大路由机制,是实现SP ...
Windows Phone 实用开发技巧（9）：自定义Windows Phone 页面切换动画
在Silverlight for Windows Phone ToolKit 中默认中有自带的页面Transitions:RollTransition.RotateTransition.SlideTr ...
ViewPager页面切换效果
ViewPager页面切换效果运行效果一: ...
（仿头条APP项目）3.二级页面首页的ViewPager页面切换
文章目录二级页面首页的ViewPager页面切换效果展示代码实现创建几个三级页面Fragment视图 ViewPager的Fragment数据丢失问题创建fragment_home视图文件 ...
wxpython多个面板_wxpython笔记：wxPython的布局管理实践【嵌入matplotlib、页面切换】...
索引 1.源码 importwximportnumpyfrom matplotlib.backends.backend_wxagg importFigureCanvasWxAgg as FigureC ...
wxpython界面切换_Python图形界面—wxPython库的布局管理及页面切换
原标题:Python图形界面-wxPython库的布局管理及页面切换前言 wxPython是基于Python的跨平台GUI扩展库,对wxWidgets( C++ 编写)封装实现.GUI程序的开发中界 ...
赞！超炫的页面切换动画效果【附源码下载】
在下面的示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D ...

OnsenUI-页面切换

效果：页面testone跳转到页面testtwo

1.testone.component.html和testone.component.ts

2.testtwo.component.html和testtwo.component.ts

注释打开后可以来回切换

OnsenUI-页面切换相关推荐

最新文章

热门文章