Маршрутизатор в Angular веб-приложении не работает на том же компоненте

Question

У меня проблема с angular роутером.

В настоящее время я нахожусь в моем роутере /HOME, и я бы хотел оттуда перейти от кнопки к /HOME#id=123456

Как мне это сделать? Я пытаюсь что-то вроде:

<a class="app-card bg-petrol"[routerLink]="['/HOME']" [queryParams]="{'id':'123456'}">

Но ничего не происходит - даже ничего в консоли.

edit: добавлен файл маршрутов

app.routes.ts

{
  path: Routes.HOME,
  loadChildren: () => import('../routes/home/home.module').then(m => m.HomeModule),
  data: { hideNavSearch: true },
},

Answer 1

Вы должны использовать queryparams со ссылкой. Например:

<a [routerLink]="['HOME ']"  [queryParams]="{'id':'123456'}">

Answer 2

В Angular вам нужно определить параметризованный путь, если вы хотите, чтобы Angular направлял к нему. Добавьте новый путь в app.routing.module.ts с тем же именем, но с идентификатором параметра.

app.routing.module.ts

@NgModule({
  declarations: [ ... ],
  imports: [
    RouterModule.forRoot([ 
      { path: 'HOME', component: HomeViewComponent }, 
      { path: 'HOME/:id', redirectTo: 'HomeViewComponent' } // add new route with id parameter
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

После этого вызовите вашу страницу следующим образом:

<a routerLink="/HOME"  [queryParams]="{'id':'123456'}">

Это решит вашу проблему.