Angular 4 дочерний маршрут, чтобы всегда включать параметр от родителя

У меня есть веб-приложение Angular 4, в котором в настоящее время размещен сайт с несколькими арендаторами.

Пример URL-адреса будет выглядеть примерно так

www.example.com/tenant/

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

const routes: Routes = [
  {
    path: ':tenant',
    canActivate: [TenantGuard, AuthGuard],
    children: [
      {
        path: 'protected',
        component: ProtectedComponent,
      },
    ],
  },
];

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

В настоящее время мой навигационный компонент выглядит примерно так

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" [routerLink]="['']">ng-webapp</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link"  [routerLink]="['']">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link"  [routerLink]="['protected']">Protected</a>
    </li>
  </ul>
</nav>

Однако нажатие на «защищено» на самом деле отправило бы меня в

www.example.com/protected/

Как я могу настроить любые ссылки на мои дочерние компоненты, чтобы включить параметр клиента из родительского маршрута?

www.example.com/tenant/protected/

Один из подходов, который я считал проходным, заключался в передаче службы ActivatedRoute из моих дочерних компонентов и построении URL-адресов внутри компонента.

Это кажется немного неэффективным, есть ли другой способ сделать это, не включая маршрутизатор в каждый компонент?


person H.Jass    schedule 30.01.2018    source источник


Ответы (1)


[routerLink]="['protected']"

На самом деле указывает маршрутизатору искать маршрут в текущем выходе маршрутизатора.

Итак, я предполагаю, что вы находитесь не в дочерней розетке, а в корневой, верно?

Если вы хотите перенаправить на защищенный, вам нужно сделать что-то вроде этого:

[routerLink]="[userTenant, 'protected']"

Или, если ваш первый арендатор установлен,

[routerLink]="['first-tenant', 'protected']"
person Community    schedule 30.01.2018
comment
Как мои компоненты узнают, что такое userTenant? - person H.Jass; 30.01.2018
comment
Потому что, так или иначе, вы его устанавливаете. В противном случае используйте второе решение с арендатором по умолчанию. - person ; 30.01.2018