Angular router - используйте [routerLink] для навигации по компоненту - PullRequest
Новая
       17

Angular router - используйте [routerLink] для навигации по компоненту

0 голосов
/ 21 апреля 2020

как мне проложить маршрут от 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,
  }
]),

У кого-нибудь есть идея?

Спасибо!

1 Ответ

0 голосов
/ 21 апреля 2020

Вы можете передать необязательные параметры в 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'}">
...