如何将参数传递给URL内某处的routerLink？

Question

我知道我可以将参数传递routerLink给路由,例如

/user/:id

通过写作

[routerLink]="['/user', user.id]"

但是这个路线怎么样:

/user/:id/details

有没有办法设置此参数或我应该考虑不同的URL方案？

Answer 1

在您的特定示例中,您将执行以下操作routerLink:

[routerLink]="['user', user.id, 'details']"

要在控制器中执行此操作,您可以注入Router并使用:

router.navigate(['user', user.id, 'details']);

路由和导航的Angular docs Link Parameters Array部分中的更多信息

Answer 2

也许这是非常晚的答案,但如果你想用param导航另一页,你可以,

[routerLink]="['/user', user.id, 'details']"

你不应该忘记路由配置,如,

 [path: 'user/:id/details', component:userComponent, pathMatch: 'full']

Answer 3

很简单

<a routerLink="/user/{{id}}/details"></a>

Answer 4

首先在表中配置：

const routes: Routes = [  
{
  path: 'class/:id/enrollment/:guid',
  component: ClassEnrollmentComponent
 }
];

现在输入脚本代码：

this.router.navigate([`class/${classId}/enrollment/${4545455}`]);

在另一个组件中接收参数

 this.activatedRoute.params.subscribe(params => {
  let id = params['id'];
  let guid = params['guid'];

  console.log(`${id},${guid}`);
  });

Answer 5

有多种方法可以实现这一点。

• 通过 [routerLink] 指令
• Router类的navigate(Array)方法
• navigateByUrl(string) 方法接受一个字符串并返回一个 promise

routerLink 属性要求您将 routingModule 导入到功能模块中，以防您延迟加载功能模块，或者如果没有自动将 app-routing-module 添加到 AppModule 导入数组中，则只需导入它。

• 路由器链接

<a [routerLink]="['/user', user.id]">John Doe</a>
<a routerLink="urlString">John Doe</a> // urlString is computed in your component

• 导航

// Inject Router into your component
// Inject ActivatedRoute into your component. This will allow the route to be done related to the current url
this._router.navigate(['user',user.id], {relativeTo: this._activatedRoute})

• 按网址导航

this._router.navigateByUrl(urlString).then((bool) => {}).catch()