1.8 ionic3入门——测滑菜单（side menu）中的界面跳转

（1）如1.3 所写，测滑菜单写在app.html，所以测滑菜单中的各个按钮的实现就在app.component.ts中写了，如果像其他普通界面一样在app.component.ts中引入NavController并在构造函数constructor中声明public navCtrl:NavController就会报错，那么，在app.html中正确进行界面跳转的方法为
（2）引入ViewChild和Nav

import { Component,ViewChild } from '@angular/core';
import { Platform,Nav} from 'ionic-angular';

（3）声明

  @ViewChild(Nav) nav: Nav;

（4）跳转

this.nav.push(SettingsPage);

（5）全部代码

import { Component,ViewChild } from '@angular/core';
import { Platform,Nav} from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { TabsPage } from '../pages/tabs/tabs'; import { LoginPage } from '../pages/login/login'; import { SettingsPage } from '../pages/settings/settings'; @Component({ templateUrl: 'app.html' }) export class MyApp { // 父组件中使用@ViewChild拿到子组件的变量和方法（父组件可调用子组件的方法和变量） // 这里引入的是app.html <ion-nav> @ViewChild(Nav) nav: Nav; rootPage:any = TabsPage; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { statusBar.styleDefault(); splashScreen.hide(); }); } push_mysettings(){ this.nav.push(SettingsPage); } }

image.png

转载于:https://www.cnblogs.com/sandyLovingCoding/p/9703300.html

1.8 ionic3入门——测滑菜单（side menu）中的界面跳转相关推荐

智慧珠海的主界面左滑菜单及ViewPager和RadioButton的使用
左滑菜单部分: 引导页进入到主界面后使用左滑菜单的话,界面分为左滑菜单Fragment和主界面Fragment. 左滑菜单:SlidingMenu.用的话需要在AndroidStudio中File - ...
带你实现开发者头条(二) 实现左滑菜单
title: 带你实现开发者头条(二) 实现左滑菜单 tags: 左滑菜单,android 自带侧滑,DrawerLayout grammar_cjkRuby: true --- 今天开始模仿开发者头 ...
Android 高仿QQ5.2双向側滑菜单DrawerLayout实现源代码
Android 高仿QQ5.2双向側滑菜单DrawerLayout实现源代码左右側滑效果图 1.主页的实现直接将DrawerLayout作为根布局,然后其内部第一个View为内容区域,第二个Vie ...
iOS10、11自定义左滑菜单项背景图片
// 以前的做法 // 1.ViewController代码如下:自定义三个左滑项 - (NSArray<UITableViewRowAction *> *)tableView:(UITa ...
带你实现开发者头条(二) 实现左滑菜单
今天开始模仿开发者头条的侧滑菜单,是本系列第二篇文章,相信大家已经看到很多app使用这种侧滑.今天我来教大家用android自带DrawerLayout控件实现. DrawerLayout是Suppo ...
【Electron】Electron开发入门（八）：自定义electron框架外壳（shell）的菜单（Menu）...
1.自定义electron框架外壳(shell)的菜单(Menu) electron的main.js里代码: const Menu = require('electron').Menu; var te ...
Wordpress 网站设计入门5 级联菜单设计
有了网页和博客网页,我们还需把他们组织起来,形成一个网站,这就是菜单的设计. Wordpress 的菜单设计非常简单.在操作面板上 Apperarance->Menus 这样就进入了菜单的设计面 ...
latex大括号多行公式_如何快速入门 LaTeX，在 XMind 2020 中轻松输入方程。
数学方程输入对于很多理工科朋友来说是一件让人头疼的事情.不仅是数学方程本身就纷繁复杂花样百出,各种输入语法更是劝退无数人. 然而很多看似复杂的东西其实并非如想象中的难,抓住本质即可快速入门.今天和大家 ...
CAD制图初学入门：如何在CAD图纸中插入图框？
在使用正版CAD软件绘制完成图纸后,为了能让CAD图纸更加清晰明了,一般情况下会需要给CAD图纸加上图框.可是有些CAD制图初学入门者并不知道该如何进行操作,接下来小编就以正版CAD软件--浩辰CAD ...

1.8 ionic3入门——测滑菜单（side menu）中的界面跳转

1.8 ionic3入门——测滑菜单（side menu）中的界面跳转相关推荐

最新文章

热门文章