关于angular路由传值（一个或多个）问题

向右看齐 2022-06-13 13:16 239阅读 0赞

在ng的页面条转传参数的方法，**ui-sref，$state**

1、\*\*Ui-sref:\*\*用于html页面进行单页面的跳转；

2、\*\*$state:\*\*用于js代码中跳转。

--------------------

**\[传递单个参数\]**

对于传递方：

传递方：ui-sref="home.ideas.edit(\{id:detailIdeas\[0\].idea.id\})  
或者：$state.go(home.ideas.edit,\{id: detailIdeas\[0\].idea.id \});

对于接受方：

.state('home.ideas.edit', {
    
        url: '/detailsEdit/:id',
    
        views: {
            "part": {
                templateUrl: 'tpls/ideas/edit.html',
                controller:"ideas_edit_ctrl"
            }
        }
    })

使用：

在ideas\_edit\_ctrl控制器中，我们可以直接使用$state.params 来获取我们传递的参数

（要先注入$state）

var idx=\{  
ideaID:$state.params.id  
\};

**传递多个参数**

其实传递参数的本质都是一样的，对于传递多个参数的我我们可以将多个参数组成一个对象，然后将这个对象转换成字符串，将字符串传递过去。

Em:

使用$state.go()传递多个参数;

对于传递方：

var User\_info=\{ name:’菱角’, age:15, skill:’angular’ \};

$state.go(“home.ideas.allIdeas”,\{user\_right:JSON.stringify(user\_info\});

对于接受方：（还是保持不变）

.state('home.ideas.allIdeas', {
        url: '/allIdeas/:user_right',
        views: {
            "part": {
                templateUrl: 'tpls/ideas/all_idea_list.html',
                controller:'ideas_allIdeas_ctrl'
            }
        }
    })

使用：

在ideas\_allIdeas\_ctrl控制器中

var user\_right=JSON.parse($state.params.user\_right);

user\_right的结构：

user\_right=\{ name:’菱角’, age:15, skill:’angular’\}

--------------------

**使用：ui-sref传递多个参数:**

传递方：

接受方：

.state('home.ideas.edit', {//编辑创意
    
        url: '/detailsEdit？id&name',
        views: {
            "part": {
                templateUrl: 'tpls/ideas/edit.html',
                controller:"ideas_edit_ctrl"
            }
        }
    })

使用：

在ideas\_edit\_ctrl控制器中，我们可以直接使用$state.params 来获取我们传递的参数

（要先注入$state）

var idx={
        ideaID:$state.params.id
    
        ideaName:$state.params.name
    
    };