Угловой 2+ необязательный параметр (запрос)

Question

Мое приложение будет доступно извне с помощью URL-адреса, и потому что мне нужно определить между определенными объектами, мне нужно предоставить параметр id. Параметр также может отсутствовать.

Моя проблема в том, что у меня есть запрос на использование параметра запроса. Я видел много решений, когда пользователь взаимодействует с определенным элементом, и он перенаправляется с дополнительными параметрами с помощью navigationExtras.

Я пытался оставить путь: "логин" и просто добавить параметр запроса, но он дает мне

Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: 'login%3Fid%3D1'

То же самое касается параметров матрицы, но с другой строкой между login и id.

Я могу использовать это как решение, но оно заставит меня дублировать все мои маршруты, а также не будет соответствовать запросу с параметрами запроса.

{
  path: 'login',
  redirectTo: 'login/',
},
{
  path: 'login/:id',
  component: LoginComponent,
},

Любое предложение?

Answer 1

Вы могли бы сделать это с дочерними компонентами, иметь корневой компонент, который перенаправляет для входа в систему, и родственный компонент с идентификатором, который перенаправляет на компонент входа в систему с идентификатором

{ path: 'login', children: [ { path: '', redirectTo: 'login/', pathMatch: 'full' }, { path: ':id', component: LoginComponent, } ]

Answer 2

В ответе вы указываете параметры маршрута. login/:id, Когда вы пытаетесь получить доступ к :id значение, вы получите его от: activatedRoute.snapshot.params['id'] и это будет соответствовать любому маршруту: login/123, login/234, login/someRandomString,

С другой стороны, queryParams добавляется как queryString в конце URL. login?query1=something&query2=somethingElse, Вот, query1 а также query2 называются параметрами запроса.

Добавить queryParams:

this.router.navigate(['/login], {queryParams: { query1: 'something', query2: somethingElse }); или же

<a [routerLink]="['/login']" [queryParams]="{query1: something, query2: somethingElse}">Router Link to Login</a>