Angular中的 routerLink

在Angular中，我们可以使用路由器（router）来导航到不同的组件。为了方便，Angular提供了一个指令routerLink，它可以简化我们的导航过程。

使用方法

routerLink指令会在点击时调用路由器去导航。在HTML中，我们可以使用类似下面的方式使用它：

<a routerLink="/about">About</a>

上面的代码中，当用户点击链接时，路由器会导航到/about这个路由，然后加载定义在它后面的组件。

我们也可以使用相对路径的方式导航：

<a routerLink="../">Back</a>

上面的代码会导航到当前路由的父路由。

动态导航

我们可以根据不同的情况，动态地生成需要导航到的路由：

<a [routerLink]="['/users', user.id]">{{ user.name }}</a>

在上面的代码中，routerLink绑定的值是一个数组，数组中的元素分别为要导航到的路由以及路由所需要的参数。

queryParams

我们也可以为导航添加查询参数：

<a [routerLink]="['/search']" [queryParams]="{ q: searchTerm }">Search</a>

上面的代码中，queryParams表示要添加的查询参数，searchTerm则是我们要添加的查询字符串的值。

fragment

我们还可以为导航添加片段（fragment）：

<a [routerLink]="['/notifications']" fragment="new">Notifications</a>

上面的代码中，fragment表示要添加的片段，这里是new。

结语

routerLink指令在Angular中的路由导航过程中发挥了重要的作用，通过本文的介绍，你应该能够熟练掌握这个指令的使用。