如何重命名 Angular 组件的路由 URL？答案

【问题标题】：How to rename the routing URL of an angular component?如何重命名 Angular 组件的路由 URL？
【发布时间】：2021-06-16 15:52:37
【问题描述】：

我是 Angular 新手，正在尝试在现有应用程序中进行一些编辑。

当前应用程序中有一个名为help 的组件，它路由到mywebsite.com/help。我想把它改成mywebsite.com/contact。

help 组件文件夹包含以下文件：help.component.html、help.component.scss、help.component.spec.ts、help.component.ts 和 help.module.ts。

我尝试在general.routing.module.ts修改这部分：

path: "help", // changed this to "contact"
        pathMatch: "full",
        loadChildren: "./pages/help/help.module#HelpModule",
        data: {
          title: "Help",
        },

但这似乎没有帮助，当我将路径更改为 path: "contact" 时出现 404 错误。有人可以帮我从哪里开始吗？

还有另外一条求助途径：

{
        path: "help-auth",
        pathMatch: "full",
        loadChildren: "./pages/help/help.module#HelpModule",
        data: {
          title: "Help",
        },
      },

我也需要触摸这个吗？

谢谢:)

【问题讨论】：

改变路径就足够了。您的应用程序中是否还有其他具有相同路径的路由模块？
是的，但是我在帖子中更新了路径：“help-auth”。我也需要改变这个吗？
我只是好奇为什么这些路线中有 pathMatch: "full" ..？
好点 :) 我不确定。原代码不是我写的
好奇：您使用的是哪个版本的 Angular？ “loadChildren”已从 Angular 8 更改，请参阅文档：angular.io/guide/lazy-loading-ngmodules

标签： angular url-routing angular2-routing rename

【解决方案1】：

正确的解决方案是如下更改general.routing.module.ts：

path: "contact", // changed this to "contact" from "help"
        pathMatch: "full",
        loadChildren: "./pages/help/help.module#HelpModule",
        data: {
          title: "Help",
        },

但是我忘记更改 html 路由，所以得到了 404 错误。

这不得不改变

<a class="nav-a" [routerLink]="['/help']" routerLinkActive="a-active">Help</a>

到

<a class="nav-a" [routerLink]="['/contact']" routerLinkActive="a-active">Contact</a>

【讨论】：