RouterLink to another component which path is created dynamically

Question

I've created UserComponent which route is:

app-routing.module.ts

{
    path: ':username',
    component: UserComponent,
    children: [
      { path: 'work-time', component: WorktimeComponent },
      { path: 'absence', component: AbsenceComponent },
    ],
}

username is value of an input from LoginComponent.

The problem is when go to child component path for example "localhost:4200/:username/work-time" and want to move back to "localhost:4200/:username" using routerLink it just shows the main page which is separated component called HomeComponent.

What I've tried to do with routerLink is:

user.component.html

<a routerLink=":username">
    <h1>test</h1>
</a>

What I want is to create a routerLink which will route to for example "localhost:4200/peter" but I really don't know how to do it.

Yeah I've tried but it didn't worked. I fixed it with <a routerLink="./"></a>. Is it a bad practice or can I just leave it like that? — illumiMatii
I still recommend you try <a [routerLink]="username"></a>. It is not a bad practice. Just code looks good. — reflexdemon

Hamad Javed Hamad Javed · Accepted Answer · 2020-10-05T15:27:33

You have to get the username from route params in the child component and bind that name with the link.

import { ActivatedRoute } from '@angular/router';
public username: string;

constructor(private activatedRoute: ActivatedRoute) {
  this.activatedRoute.queryParams.subscribe(params => {
        this.username = params['username'];
    });
}

<a [routerLink]="username"></a>

RouterLink to another component which path is created dynamically

1 Answers