Angular 4路由器:如何在url栏中不显示参数？

Question

我用的时候:

  constructor(router: Router) {
    router.navigate(['page2', 123456789]);
  }

我example.com/page2/123456789在地址栏中看到了.有可能隐藏它吗？我不希望有人能够进入,example.com/page2以便他/她导航到这个特殊页面.它应该只在命令内部工作router.navigate(['xy', 'parameter']);

Answer 1

在angularJS或angularjs 1.x中使用状态路由可以在路由过程中用动态数据隐藏参数，但是Angular 2+路由不允许。

唯一的解决方案是使用服务，否则请阅读下文。

参数不是要隐藏的，而是数据属性。因此，不要使用SkipLocationChange：true应该使用data属性。注意data属性不能用于动态内容。它将是更多的静态数据。

SkipLocationChange：true导航而不将新状态推入历史记录。这意味着，如果您从/ page1导航到/ page2，则导航后url仍将显示/ page1。这不是作者所期望的。这里的期望是在URL中显示/ page2，但在URL中看不到参数。

解决方案是例如在路由配置中使用数据属性

 path: 'product', component: ProductComponent , data: [{isProd: true}]}

然后您可以获取数据值，如下所示

 route.snapshot.data[0]['isProd'];

Answer 2

skipLocationChange您可以通过在路由器上设置 member true 来跳过完整的 url 显示：

this.router.navigate(['/view'], { skipLocationChange: true });

文档