将值传递给路线 [英] Pass values to route
问题描述
我有一个物品清单.当用户单击某个项目时,该用户将被带到项目详细信息"页面.
I have a list of items. When the user clicks on an item, the user will be taken to item details page.
我想将包含商品详细信息(例如商品的图片网址)的对象传递给路线.但是,我不想在路由URL中公开它.
I want to pass an object containing item details(like item's image URL) to the route. However, I don't want to expose it in the routes url.
如果有办法像<a route-href="route: details; settings.bind({url: item.url})">${item.name}</a>
那样做,那就是金.
If there were a way to do something like <a route-href="route: details; settings.bind({url: item.url})">${item.name}</a>
that would be gold.
我已经看到,如果在路由配置中定义了属性,则可以将其传递给路由.但是,我不知道如何从模板更改它.另一种方法是定义一个单例并在其中存储值,然后将对象注入到目标路由.
I have seen properties can be passed to a route if defined in the route configuration. However, I don't know how to change that from the template. Another way could be is to define a singleton and store the values there and inject the object to the destination route.
有没有一种方法可以将值传递给视图中的路由(例如角度ui路由器param
对象)?
Is there a way to pass values to routes from view (like angular ui-routers param
object)?
推荐答案
好,所以我想出了一种方法,可以实现一些与我想要的目标更接近的目标:
Okay so I figured out a way to achieve something closer to what I wanted:
目标:将数据传递给路由,而不将其暴露在位置栏中.
Objective: Pass data to route without exposing them in the location bar.
比方说,我们有一个用户列表,我们希望将username
传递到用户的个人资料页面,而无需将其定义为查询参数.
Let's say, we have a list of users and we want to pass the username
to the user's profile page without defining it as a query parameter.
在视图模型中,首先注入Router
,然后将数据添加到目标路由器:
In the view-model, first inject Router
and then add data to the destination router:
goToUser(username) {
let userprofile = this.router.routes.find(x => x.name === 'userprofile');
userprofile.name = username;
this.router.navigateToRoute('userprofile');
}
现在,当路线更改为userprofile
时,您可以作为activate
方法的第二个参数访问路线设置:
Now when the route changes to userprofile
, you can access the route settings as the second parameter of activate
method:
activate(params, routeData) {
console.log(routeData.name); //user name
}
这篇关于将值传递给路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!