如何在不在url中的状态之间传递参数？

Question

我想知道如何传递参数,这些参数在URL中不可见？

截至目前,我有:

{path: '/editUser/:userId', name: 'Edit User', component: UserEditComponent}

当我导航到这样的视图时:

<a href="#" [routerLink]="['Edit User',{userId: id}]"

该userId会在URL中显示出来.

如何设置它,以便在URL中不可见？

谢谢

Answer 1

好问题 !

我不知道该怎么做但是我知道它的替代,所以发布答案可以帮助某人.

基本上有两种选择(据我所知)通过路由发送数据

• RouteParams(如有问题)
• 数据(路由时的财产)

RouteParams

现在,当我们发送数据时,RouteParams我们必须以similer的方式定义:

{path: '/editUser/:userId', name: 'Edit User', component: UserEditComponent}

<a href="#" [routerLink]="['Edit User',{userId: id}]"

通过使用此方法,我们可以正常发送数据,但所有数据都在URL中可见

数据

当我们不希望在URL路径中显示数据时,我们必须使用angualr2提供的data属性通过路由发送数据@RouteConfig annotation.通过使用此属性,我们可以在路由配置时将其他数据发送到组件,而不会在URL中显示它.这是这个属性的例子.

@RouteConfig([
    {path: '/product/:id', component: ProductDetailComponentParam,
     as: 'ProductDetail', data: {isProd: true}}])

export class ProductDetailComponentParam {
    productID: string;
    constructor(params: RouteParams, data: RouteData) {
        this.productID = params.get('id');

        console.log('Is this prod environment', data.get('isProd'));
    }
}

通过使用它,我们可以通过路由发送数据而不显示在URL中.工作实例相同:http: //plnkr.co/edit/N5IzUH0pc3nN1O7iQZkD？p = preview]

欲了解更多信息,请阅读这篇精彩的文章