首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何检查当前页面是否从ionic 2中的sidemenu加载

在Ionic 2中,可以通过以下步骤检查当前页面是否从sidemenu加载:

  1. 首先,需要导入NavController模块,以便在页面中使用导航控制器的功能。在页面的顶部添加以下代码:
代码语言:txt
复制
import { NavController } from 'ionic-angular';
  1. 在构造函数中注入NavController,并将其作为类的一个成员变量。在构造函数中添加以下代码:
代码语言:txt
复制
constructor(public navCtrl: NavController) { }
  1. 在页面的ionViewDidLoad()生命周期钩子函数中,使用NavController的getActive()方法获取当前活动页面的组件实例。在该函数中添加以下代码:
代码语言:txt
复制
ionViewDidLoad() {
  let activePage = this.navCtrl.getActive();
  console.log(activePage);
}
  1. 在控制台输出的activePage对象中,可以查看当前活动页面的组件实例。如果页面是从sidemenu加载的,它将具有一个menuId属性,该属性的值与sidemenu的menuId相匹配。
  2. 可以使用条件语句来判断当前页面是否从sidemenu加载。例如,如果sidemenu的menuId为'main-menu',则可以使用以下代码:
代码语言:txt
复制
ionViewDidLoad() {
  let activePage = this.navCtrl.getActive();
  if (activePage.menuId === 'main-menu') {
    console.log('当前页面是从sidemenu加载的');
  } else {
    console.log('当前页面不是从sidemenu加载的');
  }
}

这样,就可以检查当前页面是否从Ionic 2的sidemenu加载了。根据需要,可以在条件语句中执行其他操作或导航到其他页面。

腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版(CDB):https://cloud.tencent.com/product/cdb
  • 云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 人工智能平台(AI):https://cloud.tencent.com/product/ai
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iotexplorer
  • 移动推送服务(信鸽):https://cloud.tencent.com/product/tpns
  • 对象存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云游戏引擎(GSE):https://cloud.tencent.com/product/gse

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

搭建Cordova开发环境

通过Cordova开发应用,可以编译为android和ios版本应用。...本文介绍Cordova+ionic+angularjs开发环境搭建 ionic是什么 ionic是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用一个开发框架。...目前绑定与angularJS和SASS。这个框架目的是web角度开发手机应用,基于PhoneGap(即cordova)编译平台,可以实现编译成各个平台应用程序。...如何创建项目 cordova命令创建原始cordova项目: cordova create MyApp ionic命令创建ionic格式项目: ionic start myApp tabs //创建带有...top栏和bottom栏示例项目 ionic start myApp sidemenu //创建带有左侧带有menu栏示例项目 ionic start myApp blank //创建空白项目

2.5K70

SNS项目笔记--项目启动

效果图.png 这里ionic 很人性化给了几个选项进行筛选其各类项目分别是:1、tabs-->带底部导航栏项目;2、blank-->空项目;3、sidemenu-->默认主页面有侧滑栏项目;4、super...-->预建页面到打包完成最适合练习上手项目;5、conference-->图像展示项目;6、tutorial-->包含有教程项目,其中项目里还含有ionic文档;7、aws-->集成了亚马逊SDK...2、新增一个导航界面 在项目进行中要进行对底部导航栏目的修改,在项目中默认为三个导航,可是项目需求需要四个,我们需要ionic g page newPage//这里newPage为我们开发人员自定义名称自动生成页面...在这里我生成名称是"my": ? 生成项目目录变化 这里我们还需要对此页面进行注册: ? 注册我页面.png 我们再将此页面添加到tab上去: ? 添加my页面步骤1 ?...添加my页面步骤2.png 于是有了以下页面: ?

2.9K20
  • 我是如何页面加载时间6S降到2S

    如何给用户提供迅速响应就显得十分重要了,这可能成为你留住用户关键。...问题复盘 某一天海外运营告知说最近几天海外站点pv,uv下降严重,希望技术帮忙查看一下原因。WTF,这跟技术有毛线关系,该用都用了,TM页面不吸引人,用户不想来,我能怎么办?...我觉得主要有两个因素来判断CDN服务优劣---命中率和节点数量。 命中率意味着是否回源,回源请求会打到你服务器上,那么加载时间就取决与用户与你服务器通讯状态了,说白了就是听天由命。...节点数多意味着可供用户选择响应节点多,优中选优,不必多说了,优秀。 网页加载时间 网页加载时间其实可以看作是页面响应时间。那么,它是由哪些部分组成?影响因素都有哪些?哪些我们是可以优化?...换成了aws,同样为我们节省了很多加载时间(注册和开通相对麻烦,但是为了用户体验这些都是值得) 后端性能优化 如何进行后端优化可以写几本书毫不夸张,但是我们做就是加配置,有钱人性。

    86920

    前后端分离之vue2.0+webpack2 实战项目 -- html模板拼接

    对于前后端分离,如何把一个页面的公共部分比如head, header, footer, content等组合成一个完整html 是一个值得考虑地方。...对于php,我们可以利用include加载其他页面,像yii框架,可以利用render将输出内容嵌入到父模板,从而形成一个完整页面。 那对于纯静态html我们如何拼接呢?...另外head内title如何自定义?对于要求head内根据不同页面有不同引用icon或者css甚至js,该如何配置呢?...,如何抽离出公共部分(head等),我们每次写页面只关注内容部分呢?...对应 js 文件 template: 为入口js文件对应用于拼接模板js 这个js就有点像phpcontroller,可以定义当前页面的title等信息,并规定使用哪个ejs模板进行拼接 /*

    1.5K60

    Ionic3 导航分析

    因为就自我感觉而言uiRouter 和 ionic导航在使用方式上有点像,特别是它们提供指令这一层来考虑。...NavController ionic导航也是类似的,至少指令这一层次来讲基本上类似的。...实现过程 整体上来看,有两个界面:登录界面、Tab界面。其中登录界面作为一个独立 界面,tab界面中某个tab上有退出当前用户功能,退出之后重新跳回到登录界面,很常见一个流程。...,所以可以是一个字符串(有关于懒加载具体可以看Angular和ionic文档) //root 表示是默认加载界面,也就是应用一启动就加载哪个界面 app.component.ts 。...this.nativeService.isLogin(false) 是我自己实现一个函数,用于判断用户是否登录。 // 加载tabs页面之前先判断是否登录(就是进入系统时展示登录界面) if (!

    2K10

    Ionic 2 应用剖析0 开始之前1 创建一个新Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

    为运行后续命令,你应当将项目目录作为当前工作目录: cd ionic2-tutorial 简单瞟一眼应用效果,使用serve命令: ionic serve 上面也说了,这些命令应该在当前项目目录下执行...我们用于加载其他组件或服务到这个组件。...在这个例子里面,我们 Ionic 库导入了 Platform, Nav和 MenuController 服务。...使用类型好处是给你应用程序增加了错误检查和一个基础水平测试——如果你pages数组被传入了一个数字,那么你应用将被中断,而这将直观去了解和处理。...页面 根组件是一个特例,我们通过 ListPage组件来看看如何添加一个普通视图到一个Ionic2应用程序。

    4.4K50

    Vue Ant Admin学习笔记,持续记录

    相关文档:https://github.com/nuysoft/Mock 3.路由守卫、axios拦截器 路由守卫则是处理进度条、检查登录是否失效、检查页面权限。...axios请求拦截器验证token是否失效,响应拦截器则是弹出错误,验证权限、退出登录,实际上就是检查token cookie。...然后清空当前路由规则,用异步之后规则重新初始化。 如果没有开启异步路由,则是在main.js运行后除初始化完整路由。 然后根据异步请求之后路由生成导航栏菜单。...拦截器是在bootstrap.js中loadInterceptors批量加载,在\src\utils\request.js对axios进行了相关参数设置,请求拦截器用于校验cookie是否失效,并进行弹窗提示...(\src\components\menu\SideMenu.vue); 9.标题 标题Admin在.env环境变量内进行设置。

    1.2K30

    html5离线缓存manifest详解

    manifest文件主要定义需要缓存文件,支持manifest浏览器将按照manifest文件规则把文件保存在本地,这样在没有网络时候就可以本地读取缓存文件。...Manifest优点离线浏览 – 用户可在应用离线时使用它们提升速度 – 已缓存资源加载得更快减少服务器负载 – 浏览器将只服务器下载更新过或更改过资源。...如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线资源加载页面,然后浏览器会对比新manifest文件与旧manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了...在更新了资源之后,新资源需要到下次再打开app才会生效,如果需要资源马上就能生效,那么可以使用window.applicationCache.swapCache()方法来使之生效,出现这种现象原因是浏览器会先使用离线资源加载页面...,然后再去检查manifest是否有更新,所以需要到下次打开页面才能生效。

    1.9K31

    【开发指南】(三)认识ionic3

    ;第二代以React Native为代表,业务及虚拟页面通过js实现,然后通过js桥接,使用原生界面渲染,也就是说,它比第一代增强了页面显示功能,等到第三代了,通过编译时把js桥接部分也省掉,直接生成原生可执行代码...其实ionic3基本向下兼容ionic2,除去性能等问题,两个版本变更编码直观感受深点,就是懒加载和路由调整(新版懒加载变得更加简单,利于web版开发和加快页面首屏加载),另外还有内置指令更灵活化...typescript 新版支持 这一次更新将提升typescript应用构建和类型检查速度并且引入了对mix-in支持等。...并且可以更轻松在项目中设置延迟加载,设置延迟加载页面的优先级,并为每个页面自定义配置。...懒加载 Ionic3.0版本开始,支持了延迟加载,我们可以将某些模块设置为延时加载,只有用户打开相关页面的时候,这个模块所在js才会被下载,这样能减少用户初次下载文件大小。

    2.7K40

    ionic监听android返回键实现“再按一次退出”功能

    在android平台上app,在主页面时经常会遇到“再按一次退出app”功能,避免只按一下返回键就退出app提升体验优化。...1、这个功能需要我们用到ionic提供registerBackButtonAction方法(注册硬件后退按钮动作) registerBackButtonAction(callback, priority...sheet = 300 关闭对话框popup = 400 关闭加载框loading = 500 注意:返回: function一个被触发函数,将会注销 backButtonAction。...如果我们不想注册返回按钮影响所有页面,就要将返回函数再调用。 例如:如果一个上拉菜单已经显示,后退按钮应该关闭上拉菜单,而不是返回一个页面视图或关闭一个打开模型。...(() = { $rootScope.exitApp = false; }, delay); } // 判断当前路由,是否是project, mission,mine, message

    1.8K20

    构建具有用户身份认证 Ionic 应用

    本文会演示如何创建一个简单 Ionic 应用以及如何添加用户身份认证。大多数应用都需要身份认证,这样才能知道用户是谁。一旦 app 知道你身份,它就可以保存你信息及个性化功能。...创建一个 Ionic 应用 在 terminal 窗口中,使用以下命令创建一个新应用程序: ionic start ionic-auth 命令行会提示选择一个 starter 项目并且可以选择是否将应用连接到...检查 CORS 和重定向 origin 类型。 ? 现在登录可以正常工作了,但是 UI 界面并没有提示。在首页右上角添加一个 "Logout" 按钮。...--lab 标识会在浏览器中打开一个页面让你查看在不同设备中效果。 ? LoginPage 在加载时会自动聚焦到 email 输入框。...想要了解如何使用 service workers 并把 app 转换成 PWA ,可以阅读 如何使用 Ionic 和 Spring Boot 开发移动应用 PWAs 部分 。

    23.8K00

    使用Ionic2开发Todo应用0 开始之前1 创建新Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    root page 根页面是您应用程序显示第一个页面,然后你可以从这里导航到其他页面。改变Ionic 2应用程序中视图可以通过改变这一根页面,或** push ** 推或 pop弹出视图。...推一个视图将会改变展现,弹出它将删除当前视图并回到前面的视图。关于导航更详细解释,我推荐看看一个相关Ionic 2导航指南。 2....现在我们已经建立了一些假数据(我们使用ionViewDidLoad生命周期钩子,这将在页面加载时被触发),您应该能够看到它已经在列表中渲染了: ?...还记得如何创建页面吗,运行下面的代码创建一个 item-detail 页面: ionic g page ItemDetailPage time and time again,我们需要在 app.module.ts...4 总结 在本教程中我们已经介绍了如何实现很多Ionic 2应用常用功能: 创建视图 监听和处理事件 视图之间导航 在视图之间传递数据 建立双向数据绑定 保存数据 显然还有很多我们可以做,使这个应用程序更漂亮

    6.1K50

    构建具有用户身份认证 Ionic 应用

    本文会演示如何创建一个简单 Ionic 应用以及如何添加用户身份认证。大多数应用都需要身份认证,这样才能知道用户是谁。一旦 app 知道你身份,它就可以保存你信息及个性化功能。...创建一个 Ionic 应用 在 terminal 窗口中,使用以下命令创建一个新应用程序: ionic start ionic-auth 命令行会提示选择一个 starter 项目并且可以选择是否将应用连接到...检查 CORS 和重定向 origin 类型。 ? 现在登录可以正常工作了,但是 UI 界面并没有提示。在首页右上角添加一个 "Logout" 按钮。...--lab 标识会在浏览器中打开一个页面让你查看在不同设备中效果。 ? LoginPage 在加载时会自动聚焦到 email 输入框。...想要了解如何使用 service workers 并把 app 转换成 PWA ,可以阅读 如何使用 Ionic 和 Spring Boot 开发移动应用 PWAs 部分 。

    23.2K50

    填一填用了半个月 ionic 遇到

    A: 实机上 livereload 本质是用手机访问电脑上网站,检查手机和电脑之间网络连接是否通畅。...---- Q: 在哪里查看 Ionic所有图标?...A: 两个系统策略不一样, Android 中有这个需求简单办法是参考该页中 Android 文件系统布局,把文件 Private 目录复制到 Public 目录下再做操作。...A: 超级弱逼模态框,因为 uirouter 限制,给它转状态非常不方便。确定只需要一个页面就能完成操作才用他。下一 Q 提供个解决办法。...---- Q: 替代 Modal 方案 A: 在 $state.go 前记录下当前 view ,然后禁止下一个 view 记录 backView ,就不会显示后退按钮( Android 硬件后退也不行

    1.8K40

    Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

    我们需要创建相应页面实现登陆和注册,如下命令将自动生成视图、控制器和样式文件: ionic g page Login ionic g page Register 修改' src/app/app.module.ts...最后,在主页中添加一个退出登陆功能,同时检查token,如果没有token跳转到登陆页面。...总结 Ionic 2 添加页面 创建页面 创建附加页面 使用 Ionic 2 开发Todo应用 0 开始之前 1 创建新Ionic 2工程 2....我们需要一个列表 3.获取远程数据 4.推送数据到服务器 总结 Ionic 2 中样式与主题 Ionic 2主题简介 创建Ionic 2应用主题方式 没有苹果电脑打包iOS平台...2中使用百度地图和Geolocation 新建项目 加入百度地图SDK库 加载地图 获取定位 坐标转换 地图定位 激活百度地图导航 总结 在Ionic 2 Native中使用Cordova

    3.7K30

    ionic4 -- angular 跳转页面

    1、引入route并新建页面ionic4 与前辈们最大不同就是通过angular引入了route,这样每次跳转时候只需要直接跳转对应路由地址就可以了,给了路由器上解耦,也解决了原来RXjs...routeload.png 源码阶段直接使用rxjs监听load跳转分配路由,通过导入父路由或者根路由自带注解和路由本身来完成类加载ionic4在这里直接使用是angular源码。... 那么我们就可以在点击此button过后即可跳转到刚才建立detail页面去了 3、自定义跳转 怀旧时期ionic 是 navcontroller.push(component...) 进行跳转指定页面,那么我们新版本如何跳转呢?...: 是否页面跳转动画 @extras: 传递页面参数 */ // 进入一个页面 goForward(url: string | UrlTree, animated

    2.9K20

    【组件篇】ionic3图像手指缩放滑动预览

    这段时间没有做ionic相关事,但看到群里有人问这个,写一下。 我在一篇文章【组件篇】ionic3开源组件提到过图像预览组件,可以看里面的源码,也可以看下面内容。...思路 首先,这种图像滑动缩放一般是个整体页面,可以是普通page,也可以用modal来弹出,为支持这两种方式也适用于懒加载,所以建议不做成组件,而是做成懒加载页面。...其次,实现这个功能其实也是很简单,正常这个功能用ionic自带slides即可,它有zoom属性,不过我那时用有bug,所以也是拿万能swiper来代替,所以先在index.html里添加: <link...}else{ this.vm.selectedCount --; } } } 说明:初始化swiper时就设定了可缩放功能,其它功能是利用slideChange事件变更当前选中索引...,每个图像关联仿checkbox按钮(直接用checkbox也行)来控制返回图像列表。

    1.5K30

    实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

    在迈向后端同时,同时介绍如何使用Chrome跨域插件,在浏览器中请求跨域数据,模拟App数据请求。...在实际项目中,这个地方是后端业务逻辑,根据请求中用户名和密码去检查用户信息,这里是模拟后端服务,所以直接返回了登陆成功。...,服务器就知道当前访问用户是谁了。...前端重构 services.js 需要大改动,需要删除MockDB, 使用 $http 后端取得数据,在CommonService中有一个buildUrl方法,只要填写相对Url就可以了,当Server...如果你使用 ionic emulate ios ionic emulate ios 是可以直接访问: ? 但是如果你使用浏览器来调试,你会在控制台看到浏览器跨域请求拦截: ?

    2.5K80
    领券