Angular 页面跳转时传参问题
首先,你需要已经配置过你的rout,比如:
$stateProvider .state('firstPage',{ url:'/Page/firstPage', templateUrl: 'Page/views/firstPage.html', controller: 'firstPageCtrl' //dependencies: ['service/vipSeachService'] }) .state('secPage', { params:{'message':null}, url: '/Page/secPage', templateUrl: 'Page/views/secPage.html', controller: 'secPageCtrl' })
其中注意第二个地址信息中的params属性,这个就是你要接受参数的对象,以key :value的形式定义
而在跳转页面时,两个方法都可以传参,一种是直接写在html中
<a ui-sref="sec-page">跳转第二页</a>
此时传参跟在页面地址的后面
<a ui-sref="sec-page({message:messageId})">跳转第二页</a>
第二种就是写在controller中
.controller('firstPageCtrl', function($scope, $state) { $state.go('secPage'); });
同样参数写在地址后面,以对象的形式
.controller('firstPageCtrl', function($scope, $state) { $state.go('secPage',{message:messageId}); });
传过去的参数,需要在目标页面的controller中用$stateParams接收,改方法需要提前注入
.controller('secPageCtrl', function($scope, $state,$stateParams) { var test=$stateParams.message; });
以上所述是小编给大家介绍的Angular 页面跳转时传参问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
angular.js 路由及页面传参示例
页面传参数方法:1.$rootScope.2.(url)/user/:name/:age. 页面转换方法:1.href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" .2.$state.Go.3.$location.path.4.ui-sref (1)自带路由ngRoute <html> <head&g
-
AngularJS页面传参的5种方式
Angular页面传参有多种办法,根据不同用例,我举5种最常见的(请在网页版知乎浏览答案): 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去. .state('producers', { url: '/producers', templateU
-
Angular 页面跳转时传参问题
首先,你需要已经配置过你的rout,比如: $stateProvider .state('firstPage',{ url:'/Page/firstPage', templateUrl: 'Page/views/firstPage.html', controller: 'firstPageCtrl' //dependencies: ['service/vipSeachService'] }) .state('secPage', { params:{'message':null}, url: '/
-
详解uniapp页面跳转URL传参大坑
案例 展示电影详情,传递电影的id.从search.vue传递到movie.vue methods: { showMovie(e){ var trailerid = e.currentTarget.dataset.trailerid; // console.log(trailerid); uni.navigateTo({ url: '../movie/movie?trailerId='+trailerid, success: res => {}, fail: () => {}, complet
-
微信小程序开发(二):页面跳转并传参操作示例
本文实例讲述了微信小程序页面跳转并传参操作.分享给大家供大家参考,具体如下: 本篇文章主要记录:保留当前页面,跳转到应用内的某个页面的..路由.跳转后的页面将在标题栏左上角带一个返回按钮. wx.navigateTo wxml: <view class='float-g' bindtap="onPostClick"> <i-icon class="post" type="brush_fill" size="30&quo
-
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
复制代码 代码如下: <script src="jquery.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $('#mySelect').change(function(){ alert($
-
uniapp中微信小程序与H5相互跳转以及传参详解(webview)
目录 技术栈: 前言: 一.小程序向H5传递 1.小程序端发送数据 2.pages.json进行设置 3.H5端进行数据接收 4.调试方式以及数据查看 二.H5向小程序传递 1.引入需要的模块 2.更改文件内容 3.H5端发送数据 4.小程序端进行数据接收 5.调试方式以及数据查看 三.参考链接地址 总结 技术栈: uniapp-H5+uniapp-微信小程序(vue3+vite2+ts) 前言: 在单位做项目的时候碰到一个需求,需要从微信小程序跳转到H5页面,这两个端都是使用uniapp编写的
-
vue3 携带参数跳转|router传参方式
目录 携带参数跳转|router传参 原理 demo vue路由跳转,参数的携带与获取 第一种方式 第二种方式 携带参数跳转|router传参 A页面点击按钮后携带参数跳转到B页面 原理 导入router import { useRouter } from "vue-router"; A页面传参router.push({}) B页面接收route.params.num; demo route.js { path: '/A', name:'A',component: () => i
-
JS控制页面跳转时未请求要跳转的地址怎么回事
其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. 直奔code... 解决办法: 在HTML中埋入隐藏from,通过js调用from进行请求链接地址 <form id='hidden_submit_info' method="post" enctype="multipart/form-data" action="test.php
-
Vue项目页面跳转时浏览器窗口上方显示进度条功能
在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载.路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间. 然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间.如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应.所以,这个时候我们可以加一个进度条来告知用户. 具体实现,我们使用NProgress这个滚动条效果插件. 1.安装: cnpm install --save nprogress 2.在main.js中引入: impor
-
Angular父子组件通过服务传参的示例方法
今天在使用ngx-translate做多语言的时候遇到了一个问题,需要在登录页面点击按钮,然后调用父组件中的一个方法. 一开始想到了@input和@output,然而由于并不是单纯的父子组件关系,而是包含路由的父子组件关系,所以并不能使用@input方法和@output方法. 然后去搜索一下,发现stackoverflow上有答案,用的是service来进行传参,发现很好用,所以和大家分享一下. 首先,创建一个service. shared-service.ts import { Injecta
-
js中关于new Object时传参的一些细节分析
1, 参数是一个对象,核心js对象(native ECMAScript object)或宿主对象(host object),那么将直接返回该对象. 其生成的对象构造器仍然是所传参数对象的构造器.这样造成的后果是虽然该对象是new Object,但其constructor不一定是Object. 复制代码 代码如下: function Person(){this.name='jack';} var w = new Object(window), d = new Object(document), p
随机推荐
- iOS10 推送最新特性研究
- asp.net上传图片并作处理水印与缩略图的实例代码
- JavaScript为事件句柄绑定监听函数实例详解
- express的中间件cookieParser详解
- MySQL Proxy的安装及基本命令使用教程
- Android Scroller完全解析
- Shell字符串截取的详细方法
- linux expect实现登陆远程主机并执行命令示例代码
- jQuery避免$符和其他JS库冲突的方法对比
- 详解android webView独立进程通讯方式
- Android5.0多种侧滑栏效果实例代码
- C#实现图像锐化的方法
- Python中sort和sorted函数代码解析
- p5.js入门教程之平滑过渡(Easing)
- jquery引入外部CDN 加载失败则引入本地jq库
- Android MediaPlayer 播放音频的方式
- 易语言优化进程内存方法
- Java String的intern用法解析
- vue + webpack如何绕过QQ音乐接口对host的验证详解
- python三方库之requests的快速上手