Angular routerLink relative to a variable route parameter

Question

I have an Angular app where the root directory is a variable route parameter:

/:demo_profile/(etc).

I cannot use relative path because my routerLink is available from different components/routes.

How can I set a routerLink target that is relative to the root of my site, followed by this param? i.e.

/SomeRoute/home

My routes:

const routes: Routes = [
  {
    path: ':demo_profile',   
    children: [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',    
        component: HomeComponent,
      },
      {
        path: 'cards',    
        component: CardsComponent,
      },
      {
        path: 'card/:id',    
        component: CardComponent,
      },
      {
        path: 'help',    
        component: HelpComponent,
      },
      {
        path: '**',    
        redirectTo: ':demo_profile',
      }
    ]
  },
  {
    path: '\**',    
    redirectTo: '/DGInsureCo/home',
  }
];

Yann · Accepted Answer · 2019-06-20 06:24:05Z

1

While not ideal, a solution consists in fetching the current URL path and then reconstruct the router link as per the below:

routerLink in the template:

<a routerLink="/{{demo_profile}}/home">Home</a>

and then reference this.demo_profile using activatedRoute:

this.route.params.subscribe( params =>
      this.demo_profile = params['demo_profile']
    )

or:

activatedRoute.snapshot.url[0].path

edited Jun 20, 2019 at 6:24

answered Jun 13, 2019 at 7:59

Yann

94615 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular routerLink relative to a variable route parameter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related