0

I have an Angular 4 webapp, that currently hosts a multi tenant site.

An example url would be something like

www.example.com/tenant/

I have setup my routes as follows, to allow myself a 'tenant guard' ensuring I always have this property before attempting to render a route

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

What I would like is to ensure that my router links always include the tenant.

Currently, my nav component looks something like

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

However, clicking on 'protected' would in fact send me to

www.example.com/protected/

How I can setup any links on my child components to include the tenant param from the parent route?

www.example.com/tenant/protected/

One approach I considered was passing was passing the ActivatedRoute service from around my child components and constructing the urls within the component.

This seems a little inefficient though, is there another way to do this without including the router in every component?

H.Jass
  • 3
  • 4

1 Answers1

0
[routerLink]="['protected']"

Actually tells the router to look for the route in the current router-outlet.

So I imagine you aren't in the child outlet, but rather in the root one, right ?

If you want to redirect to protected, you have to do something like this : 

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

Or, if your first tenant is set, 

[routerLink]="['first-tenant', 'protected']"