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 页面跳转时传参问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • AngularJS页面传参的5种方式

    Angular页面传参有多种办法,根据不同用例,我举5种最常见的(请在网页版知乎浏览答案): 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去. .state('producers', { url: '/producers', templateU

  • 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

  • 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)

    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传参方式

    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

随机推荐