Я работаю в проекте Angular 9.
У меня есть таблица, которую можно использовать повторно, сейчас у меня есть два (родительских) компонента, использующих таблицу. Я хочу, чтобы пользователи могли выбирать элемент в таблице и перенаправляться на страницу сведений об этом элементе. Проблема в том, что эти таблицы находятся на двух разных маршрутах (скажем, /lists/parent1 и lists/parent2), и страница сведений является расширением этих маршрутов. Итак, если вы щелкаете по элементу для таблицы parent1, вам нужно go к маршруту /lists/parent1/details/${id}, а если вы используете таблицу parent2, вы бы go до /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() fun c, использованном выше вместо входного параметра.
- Opt4) ??? Почему-то я думал, что есть способ просто перемещаться, добавляя к текущему маршруту. Например: если вы были на маршруте
/lists/parent1, я думал, что есть функция навигации маршрутизатора, такая как router.navigateFromRoute.(['/details/${id}']), и она просто будет переходить от текущего маршрута и добавлять к нему, так: /lists/parent1/details/${id}. Но единственные функции маршрутизатора, которые я вижу, это navigate() и navigateByUrl(). Это существует? Я не знаю, почему я так думал.
Один путь лучше остальных? Я хочу сохранить этот компонент таблицы многоразовым. Существует ли стандартная практика для такого типа функций?
Буду признателен за любые советы и подсказки, спасибо!