ionic4.x仿京东 - 9.2.登录-生命周期函数、EventEmitter

最新推荐文章于 2020-10-19 18:25:33 发布
最新推荐文章于 2020-10-19 18:25:33 发布
阅读量135 收藏
点赞数
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYYzyy1993/article/details/108987917
版权
ionic 专栏收录该内容
62 篇文章 5 订阅 ¥59.90 ¥99.00
订阅专栏
本文介绍如何在Ionic4中利用生命周期函数和EventEmitter解决登录后页面即时显示用户信息的问题。讲解了ionViewWillEnter等生命周期函数的触发场景，以及如何通过EventEmitter实现在不同页面间的通信，详细阐述了从登录到返回tab4页面的整个过程，确保登录成功后立即显示用户名和会员状态。
摘要由CSDN通过智能技术生成

最终目的：

上一章留下的bug-----修复后达到：点击登录按钮，回到tab4页面，立即显示用户名，普通会员，而不是刷新后才能显示

 

一、生命周期函数

1. Ionic4 中内置的生命周期函数：

  • ionViewWillEnter—当进入一个页面时触发(如果它从堆栈返回)
  • ionViewDidEnter—进入后触发
  • ionViewWillLeave—如果页面将离开触发
  • ionViewDidLeave—在页面离开后触发
  • ionViewWillUnload—页面卸载的时候会触发，如果无法触发使用 ngOnDestroy

2. Ionic4 可以使用的 Angular 生命周期函数

  • ngOnChanges 当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发
  • ngOnInit 请求数据一般放在这个里面 （重要*）
  • ngDoCheck 检测，并在发生 An
了解本专栏 订阅专栏 解锁全文
ZYYzyy1993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
ionic4.x仿京东 - 5.2.首页-猜你喜欢、商品列表api接口
ZYYzyy1993的博客
09-03 305
一、api接口概览 1.信息准备 （1）地址：http://jd.itying.com/api/plist （2）传参说明： e.g. 浏览器输入：http://jd.itying.com/api/plist?pageSize=2&page=3 表示获取第3页的数据，每一页的数据只有2条 e.g. 浏览器输入：http://jd.itying.com/api/plist?cid=xxx 分类页面用到，cid参数是分类id e.g. 浏览器输入：http://jd.itying..
ionic4.x仿京东 - 10.1.4.购物车-全选反选、保存购物车状态、商品详情跳转到购物车
ZYYzyy1993的博客
10-11 317
一、全选反选 1.实现刚进来时，若商品前面的checkbox都选中，则全选按钮选中，只要有一个未选中，全选按钮未选中 思路：购物车里的商品数量 和 选中的商品数量进行对比，若相等，则全选 => 要封装一个获取选中的商品数量的函数 （1）在【cart.service.ts】里封装 获取选中的商品数量 的函数 （2）【tab3.page.ts】里 定义一个变量isCheckedAll，默认为true，表示全选 比较购物车数量和选中商品的数量，相等则全选为true，反之全选为false
模仿京东商城实训小项目源码
07-22
这是我一个Android初学者对所学到的知识的一次综合运用，和真正的商城项目还有很大很大差距，有问题欢迎提出，一起努力！具体运行截图可以看我博客~ 主要实现以下方面： 商城界面设计 使用Fragment实现底部导航栏切换界面 使用Handler延迟跳转（启动页面延迟1秒跳转到主页面） BaseAdapter的使用（为listview填充数据） ViewHolder的使用（为listview滚动的时候快速设置值） Sqlite3数据库的创建以及增删查改（模拟存储购物车商品） SharedPreferences的使用（模拟存储收件人信息） 自定义Dialog（确认删除对话框） overridePendingTransition的使用（切换Activity时的动画效果）
Event Service
yanglq的博客
06-19 669
Event Service When using events within an MPI application, a thread needs to be created to distribute any events that occur on the controller. This involves calling mpiControlProcessEvents and then
ionic4 监听事件
Java is the best language~
06-16 2098
监听事件我是这么理解的：程度等待一个事件的发生，当这个事件发生之后，对它作出反应。比如更换头像，当我更换完头像之后，个人中心就要重新获取最新的头像。 那么在ionic4中，我们如何实现监听事件呢？ 1、安装监听事件包 cnpm install --save eventemitter3 2、在事件发生页面，引入监听组件，声明变量，发出广播 //引入组件 import { EventS...
Ionic3.x/Ionic4.x从基础入门到项目实战视频教程
热门推荐
yuanlaile的博客
05-20 1万+
快过年罗，期待与家人的团聚，想想有点小激动，嘿嘿~~只是手头还有个项目难度比较大，希望早点搞定......感觉每天都有太多的事情，学习的时间越来越少，难道是年龄越大时间越不够用吗？？接近三个月都在加班加点的忙项目，没有像以前那样不断学习总结了，只是每周会关注学习Ionic3仿京东项目的后续更新视频教程，给自己找一点满足感，听说Ionic4.x也快出来了，不过正常Ionic4.x与Ionic3.x不...
ionic4.x-京东商城
神zhi殇的博客
10-14 970
功能： 首页、分类、购物车、我的 搭建项目，增加tab4，并修改tab样式 ionic start jdshop tabs // 搭建项目 ionic g page tab4 // 第四个tab页面 添加上tab4，然后修改tab的文字和icon。 home、 ios-apps、 ios-cart、 contacts 修改tab的颜色： 1.使用自定义主题色的方法，并没有改变tab的选中颜色，所以不行。 2.修改某一类组件的颜色（ion-tab-button）。css properties .ion-c
ionic-android-push-notification
05-07
使用Ionic和Node.js在Android上推送通知的示例 您必须按照本教程的说明向注册，生成KEY API和项目编号。 安装 $ cd app $ ionic platforms add android $ cd push-server $ npm install 必要的改变 /App/...
ionic-img-cache:Ionic 1.x应用程序的图像缓存
04-06
ionic-img-cache :framed_picture: 离子指令，用于在首次加载时缓存图像或元素背景图像。 在库的顶部工作。 该库可与Ionic Framework（v> = 1.0）一起使用，支持的平台为： 安卓 的iOS Windows Phone 8.1 ...
ionic-vue-适用于Ionic v4的Vue.js集成-Vue.js开发
05-27
Ionic-Vue用于Vue的Ionic集成适配器。 Ionic-Vue与@ ionic / vue的比较Ionic-Vue代码库已添加到Ionic内核中，并以@ ionic / vue的形式提供。 Ionic-Vue如何为Vue集成离子适配器。 Ionic-Vue与@ ionic / vue的比较...
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建
02-13
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建 一、Ionic 介绍............................................................................................................................1 二...
使用ionic3ag4编写模仿京东商城的demo
08-10
在本文中，我们将深入探讨如何使用Ionic 3和Angular 4框架来构建一个模仿京东商城的混合移动应用。这两个强大的工具结合在一起，可以为开发者提供跨平台的移动应用开发能力，利用Web技术栈（HTML、CSS和JavaScript）...
CORBA Programming with TAO - 8.Event Service（事件服务）
pleasetojava
06-30 261
CORBA Programming with TAO - 8.Event Service（事件服务） 摘要： 事件服务（Event Service）通过在通信的双方甚至是多方间引入一个第三方――Event Channel，一定程度上解除Client和Server之间的耦合关系，在通信的过程中，任意一方只需与Event Channel打交道，而无需确切知道对方的存在，从而使得二者由一对一的关...
Ionic4—EventEmitter事件驱动实现页面通讯
雷雨天的雷胖子
12-02 734
目录 一、概述 二、配置EventEmitter 三、监听和广播 四、广播传值 一、概述 Ionic4生命周期函数的触发有条件限制，页面链接跳转和返回操作不会触发页面进入和离开的生命周期函数。为实现如用户登陆返回用户中心页面后立即显示用户信息这种功能，我们引入EventEmitter事件驱动来实现页面通讯。 EventEmitter是nodeJs中的一个模块，也可以在Ionic4中使...
ionic4.x仿京东 - 10.2.确认订单-去结算跳到确认订单（返回特定页面），确认订单页面布局
ZYYzyy1993的博客
10-12 934
一、新建确认订单页面 ionic g page checkout 二、配置路由 ----------- tab3与checkout----------- 1. 从tab3的购物车点击去结算，跳到确认订单页面 【tab3.page.html】 为什么不用routerlink，这里不单单是页面的跳转，还涉及到数据的处理 【tab3.page.ts】 doCheckout()里要做的事情：navController跳转页面并get传值重要！！！ 获取选中的要去结算的商品，判断有没...
ionic4.x仿京东 - 12.提交订单，去支付页面制作
ZYYzyy1993的博客
10-14 910
点击“立即下单”按钮，把信息提交到服务器，成功则跳转到支付方式页面 => 一、去支付页面制作 1、创建新页面 ionic g page payment 2、页面结构 【payment.page.html】 【payment.page.ts】 效果： 为什么没有默认选择支付宝支付？点击后： 双向数据绑定是否成功？验证：在dopay()方法里打印出payType ...
Ionic Native - 1.cordova插件、获取设备号、获取地理位置、调试工具Vconsole
ZYYzyy1993的博客
10-19 603
一、Ionic 调用硬件的能力 Ionic 调用原生 api 的能力是基于 cordova 的 ，cordova 是 Adobe 公司的一个开源的框架，诞生于 2008 年，可以让我们用 javascript 调用手机原生的几乎所有的 api，比如：摄像头、麦克风等、重力感应、加速器、声音、震动、网络、视频、音频、地理定位等，原生能实现的所有功能。 cordova 目前最新版本是 cordova9.x 的版本。corodova3.x 以后的所有版本使用方法都是一样的。 Ionic 在 cordova.
ionic4.x仿京东 - 2.1.首页--导航栏、轮播图、猜你喜欢、商品列表
ZYYzyy1993的博客
08-31 396
一、准备 1.定义公共样式 【src/global.scss】 body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, secti
Ionic iOS打包 - 2.真机调试
ZYYzyy1993的博客
10-19 324
一、准备工作 1、你得有苹果开发者账号个人（$99）、公司（$99）、企业（$299）账号均可。 2、能上网的苹果电脑 macos（苹果虚拟机也可以）、Xcode、iOS 设备（iPhone、ipad 均可） 3、创建项目 sudo ionic start ioniciphone tabs cd到项目目录 sudo ionic serve 浏览器运行 sudo ionic cordova platform add ios添加ios环境 sudo ionic build --prod ...
@ionic-native/in-app-browser怎么使用
最新发布
06-04
@ionic-native/in-app-browser是一个Ionic Native插件，它提供了一个原生InAppBrowser对象用于在应用程序中打开外部网页或文档。 要使用@ionic-native/in-app-browser，您需要执行以下步骤： 1. 在您的Ionic项目中安装插件： ``` npm install @ionic-native/in-app-browser ``` 2. 在需要使用该插件的组件中导入插件： ``` import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; ``` 3. 在构造函数中注入插件： ``` constructor(private iab: InAppBrowser) { } ``` 4. 在需要打开外部网页或文档的位置使用以下代码： ``` const browser = this.iab.create('https://ionicframework.com/'); ``` 其中，'https://ionicframework.com/'是您需要打开的网址。 这样，就可以使用@ionic-native/in-app-browser打开外部网页或文档了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZYYzyy1993

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值