具有多个参数的Angular 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或其他类似的路线。

如何从projects.component传递progectId变量？
或者也许有人知道实现这个的另一种方式。

Answer 1

对于route这类routerLink我应该使用<a routerLink="/projects/{{progectId}}/settings" routerLinkActive="active">cool link</a> 这样的问题：

route path

并在routing module中更改{ path: ':id/settings', component: YourComponent} ，如下所示：

projectId

有关获取ActivatedRoute的其他信息，请按以下步骤操作：

1. 在object。
中注入component constructor variable
2. 在projectId。
中定义名为component的{​​{1}}
3. 以params方式activatedRoute object获取ngOnInit()。

4. 最后，你应get projectId 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)">

然后更改功能定义以反映这一点。