Angular 2 路由器 Link 具有多个参数

Question

我有这样的路线

   path: 'projects/:id/settings'

在我的 header.component.html 中，我想在这个页面上有一个 link

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

我有一个 project.component，当我点击某个项目时，我会进入项目页面。然后我需要有可能去 projects/:id/settings 或其他类似的路线。

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

Answer 1

我通常在组件 class 中这样做

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

然后像这样从 html 代码调用函数

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

在你的情况下，因为我假设你正在循环你的项目，你可以用这样的参数调用你的函数

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

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

Answer 2

我遇到了同样的问题 route 你应该这样使用 routerLink:

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

并像这样更改 routing module 中的 route path：

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

如需获取更多信息 projectId，您应该按照以下步骤操作：

在你的 component constructor.

ActivatedRoute

object

在您的 component 中定义一个名为 projectId 的 variable。
在ngOnInit()方法中通过activatedRouteobject获得params。

最后你应该 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'];
  });
 }}

Angular 2 路由器 Link 具有多个参数

Angular 2 Router Link with multiple parameters

javascript

angular2-template

angular