URL 嵌套路由中的括号 - Angular v4

Question

我的 Angular 应用程序上的路由有问题，它在 URL 中添加了一个括号，而它不应该。

我有一个 'deep' 嵌套路由，所以我一直在尝试不同的方法，但运气不好。

我只在嵌套的最底部有问题，所以最后一条路线可能

where I expect this:

http://localhost:4200/#/customers/1/overview

I get this:

http://localhost:4200/#/customers/1/(overview)

我将代码与项目分离并在 GitHub 上创建了一个简单的示例，因此您可以下载它并尝试使用它（抱歉，无法在 plunkr 上制作）

https://github.com/ialex90/AngularErrorRouting

有几个分支，尝试不同的方法，

此外，您可以检查此 public link 以查看更详细的行为。

https://angular-error-routing.netlify.com/#/dashboard

有什么想法吗？谢谢！

Answer 1

我没有用更好的方法解决它，因为我最喜欢的解决方案是使用相对路径，而我使用绝对路径，但至少，它确实有效。

所以，我将侧边栏 HTML 中的 routerLink 属性更改为使用点击输出事件调用方法，方法是这样的：

sidebarLink(item: string) {
        let paths = window.location.hash.split('/');
        if (paths.length >= this.limitCharPositionURL) {
            paths = paths.slice(this.hashCharPosition, this.limitCharPositionURL);
            paths.push(item);
            paths[0] = '/' + paths[0];
            this._router.navigate(paths);
        }
    }

所以我正在构建 limitCharPosition 为 1 的路径，以从返回的位置哈希值中删除 #。在这种情况下，limitCharPositionURL 将为 3，因为 window.location.hash returns 以下数组：

['#', 'customers', 'id']

所以为了确保即使 url 更长，我在 3 处将其剪掉。

然后，我将我们需要的 'overview' 或 'groups' 或 link 添加到数组中。最后，我将“/”添加到第一个值以使路线导航绝对化。

您可以在此存储库中找到解决方案： https://github.com/ialex90/AngularErrorRouting/tree/Routing

以及在此 link 中运行的演示： https://neurologist-antelope-53654.netlify.com/#/dashboard

希望对其他人有所帮助。

如果您遇到同样的错误并找到了其他解决方案，请分享:)

Answer 2

在路由器开头添加/link

[routerLink] = "/overview"

URL 嵌套路由中的括号 - Angular v4

Parenthesis in the URL nested routing - Angular v4

angular-routing

angular