Глобальное изменение корневого маршрута Angular без изменения routerLinks

В настоящее время у меня есть маршруты, настроенные что-то вроде

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], чтобы они указывали на этот новый путь.

Так, например, я хочу изменить маршрутизацию следующим образом, где 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, ЧЕГО Я ПЫТАЮСЬ ИЗБЕЖАТЬ.

У меня потенциально могут быть сотни ссылок [routerLink], помимо необходимости часто менять этот корневой путь.

Решение, над которым я сейчас работаю, заключается в обнаружении вызова маршрутизации «NavigationStart» и изменении пути в этой точке, чтобы добавить новый корневой путь, но я не думаю, что это сработает так, как я надеялся.

Кроме того, это еще один способ справиться с этим: https://angular.io/guide/router#change-heroes-to-superheroes

Но я хочу избежать раздутой конфигурации маршрутизации.


angular routerlink angular2-routing
person Scot    schedule 13.01.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Боюсь, что вам не избежать этого. Проблема в том, как написаны ваши [routerLink]. Вы должны использовать относительную навигацию, а не абсолютную. Вот как вы должны переписать свои ссылки, чтобы вы могли без проблем изменять маршруты корневого уровня:

[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"   
[routerLink]="['child']"
person Artyom Krasnyuk    schedule 13.01.2020

arrow_upward
1
arrow_downward

Насколько я понимаю, вы хотите беспрепятственно добавить еще один уровень иерархии в свой массив маршрутов, не затрагивая существующие 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"},

чтобы существующие ссылки не мешали.

Спасибо.

person Obaid    schedule 13.01.2020

arrow_upward
0
arrow_downward

Кажется, это работает хорошо для меня.

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 с командой ng build. Это будет работать только в том случае, если вы хотите глобально добавить префикс (или подкаталог домена) ко всем маршрутам.

ng build --base-href site1
person Scot    schedule 13.01.2020