Question

我的Angular应用程序上的路由有问题，它在不应该为URL添加括号时。

我有一个'深层'嵌套路由，所以我一直在尝试不同的方法而不幸运。

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

我希望如此：

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

我明白了：

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

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

https://github.com/ialex90/AngularErrorRouting

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

此外，您可以查看此公共链接以查看更详细的行为。

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

有什么想法吗？谢谢！

Answer 1

在路由器链接的开头添加/

[routerLink] = "/overview"

Angular 5 child routes adding parentheses to the route

Answer 2

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

因此，我将侧边栏HTML中的routerLink属性更改为使用click output事件调用方法，方法如下：

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返回以下数组：

['＃'，'customers'，'id']

所以要确保即使网址较长，我也会在3时将其剪掉。

然后，我将'overview'或'groups'或我们需要的链接添加到数组中。 LAstly，我将'/'添加到第一个值，使路线导航绝对。

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

演示在此链接中运行： https://neurologist-antelope-53654.netlify.com/#/dashboard

希望对其他人有帮助。

如果您遇到相同的错误并找到了其他解决方案，请分享：）

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

2 个答案: