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>

并在routing module更改route path ，如下所示：

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

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

1. 在component constructor注入ActivatedRoute object 。
2. 在component定义一个名为projectId的variable 。
3. 得到params通过activatedRoute object在ngOnInit()方法。

4. 最后，您应该像这样在html get projectId ： {{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)">

然后更改函数定义以反映这一点。