Как использовать router.navigateByUrl и router.navigate в Angular

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

Источник

6 ответов

Решение

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)',

Читайте больше в официальных документах.

Источник

router.navigate против router.navigateByUrl

router.navigate это просто удобный метод, который обертывает router.navigateByUrl, это сводится к:

navigate(commands: any[], extras) {
    return router.navigateByUrl(router.createUrlTree(commands, extras), extras);
}

Как упоминалось в других ответах router.navigateByUrl будет принимать только абсолютные URL:

// This will work
router.navigateByUrl("http://localhost/team/33/user/11")
// This WON'T work even though relativeTo parameter is in the signature
router.navigateByUrl("../22", {relativeTo: route})

Все относительные расчеты производятся router.createUrlTree а также router.navigate. Синтаксис массива используется для обработки каждого элемента массива как URL-адреса, изменяющего "команду". Например".." - подниматься, "path" - опускаться, {expand: true} - добавить параметр запроса и т. д. Вы можете использовать его так:

// create /team/33/user/11
router.navigate(['/team', 33, 'user', 11]);

// assuming the current url is `/team/33/user/11` and the route points to `user/11`

// navigate to /team/33/user/11/details
router.navigate(['details'], {relativeTo: route});

// navigate to /team/33/user/22
router.navigate(['../22'], {relativeTo: route});

// navigate to /team/44/user/22
router.navigate(['../../team/44/user/22'], {relativeTo: route});

Который {relativeTo: route} Параметр важен, так как именно он будет использоваться маршрутизатором в качестве корня для относительных операций.

Получите это через конструктор вашего компонента:

  // In my-awesome.component.ts:

  constructor(private route: ActivatedRoute, private router: Router) {}
  
  // Example call
  onNavigateClick() {
    // Navigates to a parent component
    this.router.navigate([..], { relativeTo: this.route })
  }

директива routerLink

Самое приятное в этой директиве то, что она извлекает ActivatedRouteдля тебя. Под капотом используются уже знакомые:

router.navigateByUrl(router.createUrlTree(commands, { relativeTo: route }), { relativeTo: route });

Следующие варианты дадут одинаковый результат:

[routerLink]="['../..']"

// if the string parameter is passed it will be wrapped into an array
routerLink="../.."
Источник

В дополнение к предоставленному ответу, есть еще 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.
 */

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

Источник

Насколько я понимаю, router.navigate используется для навигации относительно текущего пути. Например: если наш текущий путь - abc.com/user, мы хотим перейти к url: abc.com/user/10, для этого сценария мы можем использовать router.navigate.

router.navigateByUrl() используется для навигации по абсолютному пути.

т.е.

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

Например, если нам нужно перейти с abc.com/user на abc.com/assets, в этом случае мы можем использовать router.navigateByUrl()

Синтаксис:

router.navigateByUrl('---- Строка ----');

router.navigate([], {relativeTo: route})

Источник

Допустим, вы используете свой сервер на http://localhost:4200, и вы находитесь на http://localhost:4200/abc, и в модуле маршрутизации вы определили путь, как показано ниже:

      const appRoutes: Routes = [
{ path: 'abc', component: MainComponent, children: [
    {path: '', component: InitialComponent},
    {path: 'new', component: LoadedComponent}
]}]

Теперь мы импортируем Router, как показано ниже, из @angular/router и назначаем его любой переменной внутри конструктора (здесь myRoute).

      import { Router } from '@angular/router';
constructor(private myRoute: Router) { }

Теперь внутри вашего метода вы будете перенаправлять с помощью navigationByUrl , что означает, что если вы находитесь на http://localhost:4200/abc и пытаетесь перенаправить с помощью navigationByUrl на http://localhost:4200/abc/new, вы сможете т. е. он сначала попытается сопоставить конфигурацию appRoutes, и, как только он будет найден в дочерних элементах, он будет перенаправлен на LoadedComponent.Code, как показано ниже:

      this.myRoute.navigateByUrl('abc/new');

Кроме того, если мы используем навигацию , то она будет работать на основе активированного маршрута и имеет небольшие изменения с текущим активным маршрутом:

      import { ActivatedRoute, Router } from '@angular/router';
constructor(private myRoute: Router, private activeRoute: ActivatedRoute) { }

Здесь, если я нахожусь на http://localhost:4200/abc и у меня есть вызов метода для перехода к новому маршруту, тогда он будет запущен на основе текущего активного маршрута, и если он имеет новый как дочерний маршрут, тогда он будет перенаправить на http://localhost:4200/abc/new

      this.myRoute.navigate(['new'], {relativeTo: this.activeRoute});
Источник

Я столкнулся с той же проблемой. Мое решение:

      ...
<p @click=parseHTML v-html=data.html></p>
...
methods: {
  parseHTML(event) {
    if (event.target.href) {
      event.preventDefault();
      if (event.target.href.includes(location.hostname)) {
        this.$router.push(event.target.href)
      }
    }
  }
}
Источник
Другие вопросы по тегам