目标:
从页面一跳转到页面二,并且将路由携带的参数传递过去。
先准备数model的工具类:
DataModels.ets
代码如下:
export class DataModelInfo {
age: number = 0;
}
export class DataModel {
id: number = 0;
info: DataModelInfo|null = null;
}
注意:一定要写export表示该类可以导出,别的页面才可以导入使用。
页面一
简单起见,第一个页面我们只放一个按钮,给这个按钮添加一个点击事件,点击这个按钮,跳转到下一个页面,并且把数据带过去。页面如下图:
import { router } from '@kit.ArkUI';
import { DataModelInfo,DataModel } from './DataModels'
@Entry
@Component
struct Page1 {
build() {
Column() {
Button('Page1测试').onClick(()=>{
this.onJumpClick()
})
}.alignItems(HorizontalAlign.Start)
.height('100%')
.width('100%')
.backgroundColor(Color.White)
}
onJumpClick() {
let paramsInfo: DataModel = {
id: 123456,
info: {
age: 18
}
};
router.pushUrl({
url: 'pages/routertest/Page2',
params: paramsInfo
}, (err) => {
if (err) {
console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('Invoke pushUrl succeeded.');
})
}
}
注意:1.import { DataModelInfo,DataModel } from ‘./DataModels’
在Page1中导入数据modelDataModelInfo,DataModel,便于在page1中使用
2.跳转的时候,params接收一个数据对象
页面二
这个页面放一个按钮和一个Text,点击这个按钮,获取上个页面传过来的数据,并且显示在Text上,如图
点击这个按钮后的效果如下图
import { router } from '@kit.ArkUI';
import { DataModel } from './DataModels'
@Entry
@Component
struct Page2 {
@State message: string = 'Hello World';
build() {
Column() {
Button('Page2测试').onClick(()=>{
const params: DataModel = router.getParams() as DataModel;
this.message = JSON.stringify(params)
})
Text('Page1传过来的值:'+this.message)
}.alignItems(HorizontalAlign.Start)
.height('100%')
.width('100%')
.backgroundColor(Color.White)
}
}
注意:const params: DataModel = router.getParams() as DataModel;
这一行是关键的,只有将router接收的params 转换成一个数据对象后,才可以方便的进行其他操作。
写在最后
有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。
希望这一份鸿蒙学习文档能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!
如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员,可以直接领取这份资料
鸿蒙(HarmonyOS NEXT)5.0最新学习路线
路线图适合人群:
IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术
获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习文档
《鸿蒙 (HarmonyOS)开发入门教学视频》
《鸿蒙生态应用开发V3.0白皮书》
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
《鸿蒙开发进阶》
●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
《鸿蒙进阶实战》
●ArkTS实践
●UIAbility应用
●网络案例
……