Как добавить к текущему маршруту и ​​перемещаться — Angular

Я работаю над проектом 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(). Это существует? Не знаю, почему я так думал.

Один способ лучше остальных? Я хочу, чтобы этот компонент таблицы можно было использовать повторно. Существует ли стандартная практика для такого типа функциональности?

Буду признателен за любую информацию и советы, спасибо!


person ineedtoknow    schedule 01.05.2020    source источник
comment
с учетом opt4: angular.io/api/router/NavigationExtras, relativeTo — это то, что вы ищете за :)   -  person pjominet    schedule 01.05.2020


Ответы (1)


вы можете передать активированный маршрут в параметры. Вы вводите маршрут: AcitvatedRoute в конструкторе, и установите его при вызове навигации. При этом в своей таблице вы можете вызвать this.router.navigate(row.id, {relativeTo: this.route}); руководство по этому поводу.

person Totati    schedule 01.05.2020