Глобально изменяющийся маршрут Angular root без изменения routerLinks - PullRequest
Новая
       14

Глобально изменяющийся маршрут Angular root без изменения routerLinks

2 голосов
/ 13 января 2020

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

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>

=================================== *

МОЯ ПРОБЛЕМА :

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

Я хочу добавить новый root URL-путь ко всему приложению, который применяется ко всем маршрутам, , но я не хочу, чтобы go изменил все [routerLink] экземпляры, чтобы указывать на этот новый путь .

Так, например, я хочу изменить маршрутизацию следующим образом, где site1 - это новый root путь 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], помимо необходимости часто менять этот путь root.

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

Кроме того, это еще один способ обработка: https://angular.io/guide/router#changing -героев-супергероев

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

Ответы [ 3 ]

1 голос
/ 13 января 2020

Итак, я понимаю, что вы хотите плавно добавить еще один уровень иерархии в массив маршрутов, не влияя на существующие routeLink s внутри всего приложения.

Вам просто нужно изменить существующий массив маршрутов следующим образом 

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"},

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

Спасибо.

1 голос
/ 13 января 2020

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

[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"   
[routerLink]="['child']"
0 голосов
/ 14 января 2020

Мне кажется, это хорошо работает.

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
...