Angular router - use [routerLink] to navigate on component

Question

how do I route from localhost:4200/home to localhost:4200/home#app=1111 ?

I tried something like:

home.component.html

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

But then nothing happen. And queryParams uses ? instead of # for routing.

home.module.ts

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

Does anyone have an idea?

Thank you!

Answer 1

You can pass optional parameters to the routerLink as further object:

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

In this case the output is: /HOME;app=1111

UPDATED

To have optional queryParams, you can add the following routes:

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

So you will have the following matches:

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

UPDATE 2

// app-routing.module.ts

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

If you use child routes, you need to add a further parameter to the path:

// home-routing.module.ts

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

And in your template:

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