Angular 2 Router Link with multiple parameters

Question

I have a route like this

   path: 'projects/:id/settings'

And in my header.component.html I want to have a link to this page

<a routerLink="['projects', progectId,'settings']" routerLinkActive="active">cool link</a>

I have a project.component, where when I click on some project I go on the project page. And then I need have a possibility go to projects/:id/settings or another similar route.

How can I pass progectId variable from projects.component?
Or maybe somebody knows another way to implement this.

Solution

I had the same issue for this kind of route you should use routerLink like this:

<a routerLink="/projects/{{progectId}}/settings" routerLinkActive="active">cool link</a>

and change your route path in routing module like this:

{ path: ':id/settings', component: YourComponent}

for additional information to get projectId you should follow these step:

1. Inject ActivatedRoute object in your component constructor.
2. Define a variable called projectId in your component.
3. Get params by activatedRoute object in ngOnInit() method.

4. Finally you should get projectId in your html like this: {{projectId}}

   import {Router, ActivatedRoute, Params} from '@angular/router';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html',
     styleUrls: ['./your-component.component.css']
   })
   
   export class YourComponent implements OnInit {
   
     private projectId: string;
   
     constructor(private activatedRoute: ActivatedRoute) {}
   
     ngOnInit() {
        this.activatedRoute.params.subscribe((params: Params) => {
        this.projectId = params['id'];
     });
    }}