角路由器-使用[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作为进一步的对象：

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

在这种情况下，输出为：/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'}">