Question

我的应用程序从以下路径http://example.com/start开始，在使用[routerLink]之后，我希望开始子字符串将被覆盖。

我试图在Angular中更改路由，并且正在Internet上进行搜索，但没有找到任何解决方案。如果我单击链接，则我的路径将如下所示：http://example.com/start/newStart/123

<a [routerLink]="['/newStart', id]></a>

我的路由如下：

const routes: Routes = [
  { path: '', redirectTo: '/start', pathMatch: 'full' },
  { path: 'star', component: StartComponent },
  { path: ':id/:id', component: NewComponent },
  { path: '**', component: StartComponent }
];

我想要的是，如果我单击链接来自的URL路径

http://example.com/start

应该是

http://example.com/newStart/123

解决方案

这对我有用。我只是在newStart之前添加斜杠。

 <a [routerLink]="['/newStart', id]">

Answer 1

这里是stackblitz demo。

使用以下链接：

<a [routerLink]="['start']">Start</a>
<a [routerLink]="['newStart', 123]">New start</a>

和以下路由定义：

const routes: Routes = [
  { path: '', redirectTo: 'start', pathMatch: 'full' },
  { path: 'start', component: StartComponent },
  { path: 'newStart/:id', component: NewComponent },
  { path: '**', redirectTo: 'start' }
];

具有两个成分StartComponent和NewComponent，角会将您重定向到加载时的StartComponent（example.com-> example.com/start）。

当您单击newStart链接时，URL将变为example.com/newStart/123，路由器将向NewComponent加载路由参数id = 123。

路由器链接重写URL参数

1 个答案: