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

【问题标题】：Parenthesis in the URL nested routing - Angular v4URL嵌套路由中的括号 - Angular v4
【发布时间】：2019-10-08 11:04:24
【问题描述】：

我的 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

有什么想法吗？谢谢！

【问题讨论】：

我不确定。但是在这里查看源代码：github.com/angular/angular/blob/4.3.0/packages/router/src/...@第428行通过搜索'（这可能是注定要发生的事情-我会冒险猜测它可能具有某种语义含义，例如可选参数。也许有人可以确认。AFAIK 它不会破坏功能。
这在 Angular 8 中仍然“损坏”。我不知道为什么这是默认行为并且不能被覆盖。如果我想要一条“次要”路线，为什么我可以自己添加该死的括号？真的那么难想象吗？是的，我意识到用大约 40 行代码，我可以编写自己的 URL 序列化覆盖。我只是觉得它很傻。

标签： angular angular-routing

【解决方案1】：

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

[routerLink] = "/overview"

Angular 5 child routes adding parentheses to the route

【讨论】：

【解决方案2】：

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

所以，我将侧边栏的 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 返回以下数组：

['#', '客户', 'id']

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

然后，我将“概览”或“组”或我们需要的链接添加到数组中。最后，我将“/”添加到第一个值以使路线导航成为绝对导航。

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

这个链接中的演示： https://neurologist-antelope-53654.netlify.com/#/dashboard

希望对其他人有所帮助。

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

【讨论】：