角度 4 错误的路由 url答案

【问题标题】：angular 4 wrong routing url角度 4 错误的路由 url
【发布时间】：2017-06-29 08:41:08
【问题描述】：

您好，我的应用程序实现了路由，我有一个用户列表，当我单击其中一个时，我会这样做：

onRowSelect(event) {
this.self = event.data._links.self.href;
this.userId = this.url.getUserId(this.self, '/', 5);

this.router.navigate(['/dashboard/user-detail', this.userId]);

this.userId 不仅是一个 id 代码，而且是一个字符串，例如：/users/5 在 user-detail.routes 我定义了这个path: 'user-detail/:code'

user-detail.component.ts

ngOnInit() {

    this.code = this.route.snapshot.params['code'];
    this.getUserDetail(this.code);
  }



  getUserDetail(code) { 
    this.http.get(this.endpointUrlService.getBaseUrl() + code, this.http.setCommonOption())

      .subscribe(response => {

        this.selected = response.json() as User;
        this.loader = 1;
      });
  }

问题是 url 路径有 '/' 的转义码 '%2'，如下所示：

http://localhost:4200/dashboard/user-detail/%2Fusers%2F2

有没有简单的方法来更正网址？

【问题讨论】：

你能给我们完整的代码吗？在这里你给我们/dashboard/user-detail的代码，但不是下面的代码（这是你的实际问题）。
还是不够。我想您必须单击用户才能导航，对吗？然后我需要实际链接的 html。我的猜测是你误用了[routerLink] 属性
不是真正的[routerLink] 是一个有选择模式的primeNg 表
好的，问题出在您的this.self = event.data._links.self.href; 上。你能把它记录下来并发布结果吗？
好的，this.router.navigate(['/dashboard/user-detail/users', this.userId]); 也是如此，其中 userId 仅等于 5（我的意思是，不是 5，而只是一个数字，你懂的）

标签： angular url-routing angular-routing

【解决方案1】：

这是导航到类似路线的好方法

this.router.navigate(['dashboard', 'user-detail', 'users', userId]);

这就是navigate 将数组作为参数而不是字符串的原因。还有一种方法

this.router.navigateByUrl(`/'dashboard/user-detail${userId}`)

你可以使用。

编辑

【讨论】：

谢谢，但我的 userId 需要是这样的路径 /users/5
好的，你试过navigationByUrl。此外，如果您在userId 中的字符串仍被编码，您可以尝试使用decodeURIComponent(userId) 对其进行解码
使用 navigationByUrl 的 url 很好，但 user-detail.routes 中的路径：'user-detail/:code' 仍然正确吗？使用 navigationByUrl 我无法将 userId 传递给 user.detail 组件