Угловое 2 Router Link с несколькими параметрами

Question

у меня есть маршрут, как этот

path: 'projects/:id/settings' 

И в моем header.component.html я хочу, чтобы иметь ссылку на эту страницу

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

У меня есть project.component, где, когда я нажимаю на какой-либо проект, я перехожу на страницу проекта. И тогда мне нужно иметь возможность перейти на projects/:id/settings или другой аналогичный маршрут.

Как передать progectId переменную от projects.component?
Или, может быть, кто-то знает другой способ реализовать это.

Answer 1

Я была такая же проблема для такого рода route вы должны использовать routerLink так:

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

и изменить свой route path в routing module так:

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

для получения дополнительной информации, чтобы получить projectId вы должны сделать следующие шаги:

1. Inject ActivatedRouteobject в вашем component constructor.
2. Определите variable под названием projectId в вашем component.
3. paramsactivatedRouteobjectngOnInit() способ.

4. Наконец, вы должны getprojectId в вашем html так: {{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']; 
       }); 
   }} 
   

Answer 2

я вообще сделать это в классе компонента, как этот

somefunctionName() { 
    let link = ['/summary', this.param1, this.param2]; 
    this.router.navigate(link); 
} 

И затем вызвать функцию из кода HTML, как этот

<a (click)="somefunctionName()"> 

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

<a (click)="somefunctionName(pass the parameter here)"> 

Затем измените определение функции, чтобы отразить это.