angular - 全局更改 Angular 根路由而不更改 routerLinks

Question

目前我有路线设置类似

const routes: Routes = [
  {path: "", redirectTo: "route1", pathMatch: "full"},
  {path: "route1", children: [
    {path: "", redirectTo: "subRoute1", pathMatch: "full"},
    {path: "subRoute1", component: SubRouteComponent}
  ]}
]

它重定向到 {domain}/route1/subRoute1，只访问 {domain}。

然后在我的组件中，我有类似的东西

<a [routerLink]="['/route1/subRoute1']">Link</a>

==============================

我的问题:

==============================

我想为整个应用程序添加一个新的根 url 路径，该路径应用于所有路由， 但我不想更改所有 [routerLink] 实例以指向这个新路径。

例如，我想像这样更改路由，其中​​ 站点1 是新的根 url 路径:

const routes: Routes = [
  {path: "", redirectTo: "site1", pathMatch: "full"},
  {path: "site1", children: [
    {path: "", redirectTo: "route1", pathMatch: "full"},
    {path: "route1", children: [
      {path: "", redirectTo: "subRoute1", pathMatch: "full"},
      {path: "subRoute1", component: SubRouteComponent}
    ]}
  ]}
]

然后我必须将 routerLinks 更改为

<a [routerLink]="['/site1/route1/subRoute1']">Link</a>

据我所知，我必须改变所有 [路由器链接] 代码中的实例以反射(reflect)此新 url 路径更改， 我试图避免的 .

除了需要经常更改根路径的能力之外，我还可能拥有 100 个 [routerLink] 引用。

我现在正在尝试的解决方案是检测“NavigationStart”路由调用并在该点修改路径以添加新的根路径，但我认为它不会像我希望的那样工作。

此外，这是另一种处理方式: https://angular.io/guide/router#changing-heroes-to-superheroes

但我想避免臃肿的路由配置。

Answer 1

恐怕你无法避免这一点。问题在于您的 [routerLink] 是如何编写的。您应该使用相对导航，而不是绝对导航。以下是您应该如何重写链接，以便您可以毫无困难地更改根级路由:

[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"   
[routerLink]="['child']"