Угловой роутер.navigate() delta

Как описано в руководстве, router.navigate принимает дельта, но руководство, но недостаточно для этого:

Перейдите на основе предоставленного массива команд и отправной точки. Если начальный маршрут не указан, навигация является абсолютной.

...

В отличие от navigateByUrl, navigate всегда принимает дельта, которая применяется к текущему URL.

Применяется ли только относительный URL-адрес или что-то более сложное? Что это за дельта, в случае абсолютной навигации?

Ответ 1

Применяется ли только относительный URL-адрес или что-то более сложное?

Это относительный URL-адрес, построенный из частей, которые вы предоставляете с помощью параметров commands и с учетом дополнительных параметров, которые вы передаете в extras целях (объект NavigationExtras).

Например, вы можете использовать relativeTo для перехода от активного маршрута или от корневого маршрута. Вы можете установить параметры запроса или фрагмент для URL-адреса, к queryParams вы переходите (queryParams и fragment в дополнительных queryParams), или вы можете сохранить параметры запроса, которые присутствуют в текущем URL- queryParamsHandling (queryParamsHandling in extras).

И так далее, так что в общем, на самом деле это нечто более сложное, чем просто навигация по URL-адресу, когда мы динамически создаем URL-адрес.

Что это за дельта, в случае абсолютной навигации?

Это то же самое для относительной и абсолютной навигации. Дельта - это набор изменений (commands) для применения к текущему маршруту (относительный) или к корневому маршруту (абсолютный) для переноса приложения в новое состояние (вместо того, чтобы просто предоставить новое URL через navigateByUrl).

В простом случае, если вы делаете что-то вроде this.router.navigate(['/heroes']) это фактически не очень отличается от использования navigateByUrl, но рассмотрите эти примеры (см. CreateUrlTree, который фактически преобразует commands и extras в конечный URL):

// create /team/33/(user/11//right:chat)
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);

// remove the right secondary node
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);

Таким образом, даже для абсолютной навигации метод navigate предоставляет набор дополнительных инструментов для динамической сборки URL-адреса. Вы можете сделать это с помощью navigateByUrl, но вы, вероятно, будете разбирать/concat/делать другие манипуляции со строками (или разрабатывать собственный инструмент, аналогичный тому, что обеспечивают navigate и createUrlTree).

Ответ 2

в относительном режиме дельта применяется к текущему маршруту. Он изначально вызывает navigateByUrl, используя этот код

/**
   * Navigate based on the provided array of commands and a starting point.
   * If no starting route is provided, the navigation is absolute.
   *
   * Returns a promise that:
   * - resolves to 'true' when navigation succeeds,
   * - resolves to 'false' when navigation fails,
   * - is rejected when an error happens.
   *
   * ### Usage
   *
   * '''
   * router.navigate(['team', 33, 'user', 11], {relativeTo: route});
   *
   * // Navigate without updating the URL
   * router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});
   * '''
   *
   * In opposite to 'navigateByUrl', 'navigate' always takes a delta that is applied to the current
   * URL.
   */
  navigate(commands: any[], extras: NavigationExtras = {skipLocationChange: false}):
      Promise<boolean> {
    validateCommands(commands);
    return this.navigateByUrl(this.createUrlTree(commands, extras), extras);
  }

многие примеры включены в исходный код https://github.com/angular/angular/blob/master/packages/router/src/router.ts