Как сделать несколько URL на одной и той же ссылке маршрутизатора

Question

Я работаю над небольшим тестовым проектом под углом и хочу включить боковую навигацию с использованием углового выхода маршрутизатора.Я хочу, чтобы там было две ссылки:

<a class="nav-link text-white" [routerLink]='["/link/to/one"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 1</a>
<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 2</a>

Есть несколько подстраниц, на которые можно перейти с одного из компонентов.Но они не должны отображаться в виде ссылки на маршрутизатор.

Таким образом, структура моего сайта может быть, например:

|-Comopnent 1
|
|-Component 2
   |- Component 3 
   |- Component 4 

Поэтому я хочу, чтобы пользователь мог перемещатьсяКомпонент2 через ссылки маршрутизатора.Из этого компонента пользователь может быть перенаправлен через код к компонентам 3 и 4. Но я не хочу, чтобы у них были дополнительные ссылки на маршрутизаторы, я хочу, чтобы в меню навигации все еще выделялся компонент 2.

В моем приложении.module.ts Я в общих чертах объявил маршруты:

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: '/link/to/one', component: Component1 },
  { path: '/another/link/to/component', component: Component2 },
])

Как мне вызвать Component3 & 4 из Component2 и позволить маршрутизатору выделить Component2 на панели навигации?

С уважением

Answer 1

Вы можете сделать это, просто установив Component3 и Component4 для отображения на дочерних маршрутах.

Таким образом, ваша конфигурация маршрутизатора будет выглядеть примерно так:

[
  { path: 'one', component: OneComponent },
  { path: 'two', component: TwoComponent, children: [
      { path: 'three', component: ThreeComponent },
      { path: 'four', component: FourComponent },
    ] 
  },
]

А затемrouterLinkActive позаботится обо всем остальном.

В CSS-классе active я установил color на red.Поэтому, какая бы ссылка ни была активной, она получит красный цвет.

Вы также можете проверить это, вручную введя /two/three или /two/four в адресной строке.

---

Вот Рабочий образец StackBlitz для вашей ссылки.

Answer 2

TL; DR

Настройте маршрут Component 3 и Component 4 как дочерние элементы Component2, а затем удалите [routerLinkActiveOptions]="{ exact: true }" из вашего routerlink, связанного с Component2.

Описание

Я думаю, вы уже знаете ответ, ключ routerLinkActiveOptions.

Сначала настройте свой маршрут так:

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full'},
  { path: '/link/to/one', component: Component1 },
  { path: '/another/link/to/component', component: Component2, children: [
      { path: '/component3', component: Component3 },
      { path: '/component4', component: Component4 },
    ],
  },
])

Затем измените routerLinkActiveOptions

До:

<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: true }">Component 2</a

После того, как:

<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink" [routerLinkActiveOptions]="{ exact: false }">Component 2</a

Разница составляет [routerLinkActiveOptions]="{ exact: false }".

Однако значение по умолчанию routerLinkActiveOptions.exact равно false, так же как и при удалении routerLinkActiveOptions.

<a class="nav-link text-white" [routerLink]='["/another/link/to/component"]' routerLinkActive="aLink">Component 2</a