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

如何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. 注入ActivatedRoute object你的component constructor.
2. 在你的中定义一个variable被叫.projectIdcomponent
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'];
     });
    }}