角路由器。 如何导航到当前 URL 但使用不同的参数？

Question

我有一个 Angular 5 项目，用户在点击一个项目时导航到这样的路线。

my_domain/{account_id}/item/{item_id}/open/
my_domain/{account_id}/item/{item_id}/closed/
my_domain/{account_id}/item/{item_id}/snoozed/

用户应该能够更改 account_id 或 item_id。 所以我希望能够重新加载页面，只更改参数（ID）。 我怎样才能做到这一点？

Answer 1

角 8

在.component.ts 中
您可以使用当前 url 并放置参数来导航数组

this.router.navigate([this.router.url, 'open']);

或在.component.html
您可以使用点作为 url “./youparam” 的一部分 - 在这种情况下，“./” == 当前 url

< a [routerLink]="['./open']">open</a>

Answer 2

简单的：

import { Router } from '@angular/router';
...
export class YourComponent{
  constructor(public router: Router) {

  }
  ...
  myRouteMethod(accountId, itemId, endpointUrl){
    // Use String literals
    this.router.navigate([`/${accountId}/item/${itemId}/${endpointUrl}/`]);
  }
}

在您的 HTML 上，您可以拥有：

<div class="wrap">
<div (click)="myRouteMethod(accountIdSomehow, itemIdSomeHow, 'open')">
open </div>
<div (click)="myRouteMethod(accountIdSomehow, itemIdSomeHow, 'close')"> close </div>
<div (click)="myRouteMethod(accountIdSomehow, itemIdSomeHow, 'other')"> other </div>
</div>

了解如何获得 accountId 和 itemId 会很有用。 可重用的函数会有所帮助，总是考虑参数而不是重复，诀窍是调整您的模板以动态地与您的组件一起工作。