Я работаю над проектом Angular 9.
У меня есть таблица, которую можно использовать повторно, на данный момент у меня есть два (родительских) компонента, использующих таблицу. Я хочу, чтобы пользователи могли выбирать элемент в таблице и перенаправляться на страницу сведений об этом элементе. Проблема в том, что эти таблицы находятся на двух разных маршрутах (скажем: /lists/parent1
и lists/parent2
), а страница сведений является расширением этих маршрутов. Таким образом, если вы щелкали элемент для таблицы parent1, вам нужно перейти к маршруту /lists/parent1/details/${id}
, а если вы использовали таблицу parent2, вы должны перейти к /lists/parent2/details/${id}
. Я также передаю данные о состоянии с маршрутизатором и устанавливаю queryParamsHandling.
Я думаю, что это можно сделать несколькими способами, и я пытаюсь выяснить, какой из них будет лучше.
- Опция 1) Когда пользователь щелкает элемент в таблице (дочерний компонент), я заставляю компонент таблицы генерировать событие, которое заставляет родительский элемент переходить на страницу сведений. Это работает, потому что родитель знает, где в настоящее время находится его маршрут, поэтому я мог бы просто сделать:
this.router.navigate([`lists/parent1/details/` + row.id], {
queryParamsHandling: "merge",
state: { data: row }
});
в parent1 и так же в parent2. Недостатком является то, что оба родителя используют очень похожие функции (повторяющийся код?)
- Вариант 2) я передаю текущий маршрут от родительского компонента к таблице (дочерней). Это был бы просто ввод, и я бы использовал эту функцию в табличном компоненте для навигации по пользователю:
goToDetails(row): void {
this.router.navigate([`${currentRouteInput}/details/` + row.id], {
queryParamsHandling: "merge",
state: { data: row }
});
}
- Opt3) Я узнаю текущий маршрут в конструкторе компонента таблицы (с
this.router.events
), а затем задаю его и использую вgoToDetails()
func, использованном выше, вместо входного параметра.
- Вариант4) ??? Я почему-то думал, что есть способ просто перемещаться, добавляя к текущему маршруту. Например: если бы вы были на маршруте
/lists/parent1
, я думал, что есть функция навигации маршрутизатора, такая какrouter.navigateFromRoute.(['/details/${id}'])
, и она просто перемещалась бы по текущему маршруту и добавляла к нему, поэтому:/lists/parent1/details/${id}
. Но единственные функции навигации маршрутизатора, которые я вижу, этоnavigate()
иnavigateByUrl()
. Это существует? Не знаю, почему я так думал.
Один способ лучше остальных? Я хочу, чтобы этот компонент таблицы можно было использовать повторно. Существует ли стандартная практика для такого типа функциональности?
Буду признателен за любую информацию и советы, спасибо!