在不更改 routerLinks 的情况下全局更改 Angular 根路由答案

【问题标题】：Globally changing Angular root route without changing routerLinks在不更改 routerLinks 的情况下全局更改 Angular 根路由
【发布时间】：2020-01-13 16:17:35
【问题描述】：

目前我已经设置了类似的路线

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

仅访问 {domain} 即可重定向到 {domain}/route1/subRoute1。

然后在我的组件中我有类似

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

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

我的问题：

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

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

例如，我想像这样更改路由，其中 site1 是新的根 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>

据我所知，我必须更改代码中的所有 [routerLink] 实例以反映这个新的 url 路径更改，我要避免这样做。

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

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

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

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

【问题讨论】：

标签： angular angular2-routing routerlink

【解决方案1】：

恐怕你无法避免这种情况。问题在于您的 [routerLink] 是如何编写的。您应该使用相对导航，而不是绝对导航。以下是您应该如何重写链接，以便您可以轻松更改根级路由：

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

【讨论】：

【解决方案2】：

所以我的理解是，您希望无缝在您的路由数组中添加另一个层次结构，而不必影响整个应用程序中现有的 routeLink。

你只需要像这样修改现有的路由数组

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

所以本质上，对于默认（空，仅限域）路由，我们使用“site1/route1”和以 route1 开头的现有路由进行分层重定向> 我们创建了一个重定向规则，例如

{path:"route1",redirectTo:"site1/route1"},

以免现有链接受到干扰。

谢谢。

【讨论】：

【解决方案3】：

这似乎对我很有效。

app-routing.module.ts

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

app.component.ts

import {routePrefix} from "./app-routing.module";
ngOnInit() {
  this.router.events.subscribe((event) => {
    if (event instanceof NavigationStart) {
      if (!(new RegExp(routePrefix)).test(event["url"])) {
        this.router.navigateByUrl(routePrefix + event["url"]);
      }
    }
  });
}

另一个选项我发现只是将 --base-href arg 与 ng build 命令一起使用。这仅在您想为所有路由全局添加前缀（或域子目录）时才有效

ng build --base-href site1

【讨论】：