Angular 路由器 - 使用 [routerLink] 在組件上導航

Question

如何從localhost:4200/home路由到localhost:4200/home#app=1111 ？

我試過類似的東西：

home.component.html

 <a class="app-card" [routerLink]="['/HOME']" [queryParams]="{'app':'1111'}">

但隨后什么也沒有發生。 和queryParams使用? 而不是#用於路由。

home.module.ts

RouterModule.forChild([
  {
    path: '',
    component: HomeComponent,
  }
]),

有人有想法嗎？

謝謝！

Answer 1

您可以將可選參數作為進一步的routerLink傳遞給 routerLink：

<a class="app-card" [routerLink]="['/HOME', {'app':'1111'}]">

在這種情況下，output 是： /HOME;app=1111

更新

要擁有可選的 queryParams，您可以添加以下路由：

{ path: 'home', component: HomeComponent }
{ path: 'home/:app', component: HomeDetailComponent }

因此，您將有以下匹配項：

/home            matches => path: 'home'
/home/1111       matches => path: 'home/:app'

更新 2

// app-routing.module.ts

RouterModule.forRoot([
  {
    path: 'home',
    loadChildren:() => import('....').then(m => m.HomeModule),
  }
])

如果使用子路由，則需要在路徑中添加更多參數：

// home-routing.module.ts

RouterModule.forChild([
  {
    path: ':app',
    component: HomeComponent,
  }
])

在您的模板中：

<a class="app-card" [routerLink]="['/HOME']" [queryParams]="{'app':'1111'}">