如何在 Angular 中使用 router.navigateByUrl 和 router.navigate [英] How to use router.navigateByUrl and router.navigate in Angular

问题描述

https://angular.io/api/router/RouterLink 很好地概述了如何创建将用户带到 Angular4 中不同路线的链接，但是我找不到如何以编程方式做同样的事情而需要用户点击链接

解决方案

navigateByUrl

routerLink 指令像这样使用:

<a [routerLink]="/inbox/33/messages/44">打开消息44</a>

只是使用 router 及其 navigateByUrl<的命令式导航的包装器/a> 方法:

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

从来源可以看出:

导出类 RouterLink {...@HostListener('点击')onClick(): 布尔 {...this.router.navigateByUrl(this.urlTree, extras);返回真；}

因此，无论您需要将用户导航到另一条路线，只需注入 router 并使用 navigateByUrl 方法:

class MyComponent {构造函数(路由器:路由器){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)'.

在官方文档中阅读更多内容.

https://angular.io/api/router/RouterLink gives a good overview of how to create links that will take the user to a different route in Angular4, however I can't find how to do the same thing programmatically rather needing the user to click a link

解决方案

navigateByUrl

routerLink directive as used like this:

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

is just a wrapper around imperative navigation using router and its navigateByUrl method:

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

as can be seen from the sources:

export class RouterLink {
  ...

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

So wherever you need to navigate a user to another route, just inject the router and use navigateByUrl method:

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

navigate

There's another method on the router that you can use - navigate:

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

difference between the two

Using router.navigateByUrl is similar to changing the location bar directly–we are providing the "whole" new URL. Whereas router.navigate creates a new URL by applying an array of passed-in commands, a patch, to the current URL.

To see the difference clearly, imagine that the current URL is '/inbox/11/messages/22(popup:compose)'.

With this URL, calling router.navigateByUrl('/inbox/33/messages/44') will result in '/inbox/33/messages/44'. But calling it with router.navigate(['/inbox/33/messages/44']) will result in '/inbox/33/messages/44(popup:compose)'.

Read more in the official docs.

这篇关于如何在 Angular 中使用 router.navigateByUrl 和 router.navigate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！