Question

我的问题最接近THIS POST。但是，这只是一种不同的情况。

SCENARIO

我有2页主要和详细信息。

要访问主页面，请访问http://localhost:3000/main
要访问详细信息页面，请访问http://localhost:3000/detail

现在，在主页面中，我有一个下拉菜单，最初没有选择任何值。

并且，在详细信息页面中，我有一个返回主要页面的返回链接

CODE

路线

{
  path: 'main',
  component: SomeComponent
},
{
  path: 'main/:dropdown_value',
  component: SomeComponent
}

详细模板

<a [routerLink]="['/main', selectedDropDownValue]">BACK</a>

selectedDropDownValue来自组件，并包含主页面中的下拉列表选定值。

问题

上面的实现就像魅力一样。所以，当我回击主页面时，基于我通过的参数，我重新选择最后选择的下拉值。但是，现在主URL变为：

http://localhost:3000/main/abc

此处，abc是选定的下拉值

但是，我希望网址保持

http://localhost:3000/main

最后不应该显示/ abc

Answer 1

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

您可以传递这样的数据：

[routerLink]="['/ProductDetail', {id:1234}]

配置路线：

{path: 'product/:id', component: ProductDetailComponentParam ,
                      data: [{isProd: true}]}

获取数据：

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

        console.log("Is this prod environment?" + data.get('isProd'));
    }

有关本文的更多信息：

https://yakovfain.com/2015/11/11/angular-2-passing-data-to-routes/

使Angular 2 params可选，以便它不会显示在URL中。

1 个答案: