Как использовать маршрутизатор.navigateByUrl и маршрутизатор.перейдите в угловой

https://angular.io/api/router/RouterLink дает хороший обзор того, как создавать ссылки, которые приведут пользователя к другому маршруту в Angular4, однако я не могу найти, как сделать то же самое программно, а пользователю нужно щелкнуть ссылку

12
angular routerlink routes

2 ответов

navigateByUrl

routerLink директива, используемая следующим образом:

<a [routerLink]="/inbox/33/messages/44">Open Message 44</a>

- это просто обертка вокруг важно навигация с помощью router и navigateByUrl способ:

router.navigateByUrl('/inbox/33/messages/44')

как видно из источников:

export class RouterLink {
  ...

  @HostListener('click')
  onClick(): boolean {
    ...
    this.router.navigateByUrl(this.urlTree, extras);
    return true;
  }

поэтому везде, где вам нужно перейти к другому маршруту, просто введите router и использовать navigateByUrl способ:

class MyComponent {
   constructor(router: Router) {
      this.router.navigateByUrl(...);
   }
}

перейти

есть еще один метод на маршрутизаторе, который вы можете использовать - перейти:

router.navigate(['/inbox/33/messages/44'])

разница между этими двумя

используя router.navigateByUrl похоже на изменение строки местоположения непосредственно-мы предоставляем "весь" новый URL. Поскольку router.navigate создает новый URL-адрес, применяя массив переданный команды, патч, к текущему URL.

чтобы четко увидеть разницу, представьте, что текущий URL-адрес '/inbox/11/messages/22(popup:compose)'.

С этим URL, вызывая router.navigateByUrl('/inbox/33/messages/44') в результате '/inbox/33/messages/44', и призывая router.navigate('/inbox/33/messages/44') в результате '/inbox/33/messages/44(popup:compose)'.

подробнее официальные документы.

24

помимо ответов, есть подробности navigate. Из комментариев функции:

/**
 * 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.
 */

на Руководство Маршрутизатор имеет более подробную информацию о программной навигации.

2