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

简单：

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很有用。可重用的功能会有所帮助，始终考虑参数而不是重复，技巧是调整模板以使其与组件动态配合。

Answer 2

Angular 8

在 .component.ts
中您可以使用当前网址，然后将param放入数组中

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

或 .component.html
中您可以将点用作网址“ ./youparam”的一部分-在本例中为“ ./”==当前网址

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

角路由器。如何导航到具有不同参数的当前URL？

2 个答案: