routerLink 按钮的使用

在角度 7 中，routerLink 是用于将用户导航到不同页面的指令。它可用于创建导航菜单和按钮，使用户能够轻松地导航到应用程序的不同部分。

语法

<a routerLink="/path/to/route">My Link</a>
<button routerLink="/path/to/route">My Button</button>

基本用法

routerLink 指令根据指定的路由路径导航到不同的路由。

在应用程序中，路径与路由定义关联。当用户单击带有 routerLink 的按钮或链接时，应用程序会自动导航到与路径相关联的组件。

示例

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

上述示例定义了一个导航菜单，其中包含两个带有 routerLink 的链接。 点击每个链接会导航到与路径对应的组件。 最后一行中的 <router-outlet> 标记指示要用路由器显示该组件。

动态路由

routerLink 还支持动态路径。 它允许您构建带有各种参数的 URL。

例如：

<a [routerLink]="['/user', userId]">User {{ userId }}</a>

在上面的示例中，userId 是一个属性，它在组件控制器中定义。 在用户单击链接时，路由会自动导航到 /user/1 或其他动态路径，具体取决于 userId 的值。

高级选项

routerLink 还提供了许多高级选项。 它支持导航到相对路径、传递查询参数、检查导航可用性等。

在需要更特定的功能时，可以查看官方文档以获取更多详细信息。

这是一个实例代码片段：

```
```HTML
<a routerLink="/" routerLinkActive="active">Home</a>
<a routerLink="/about" [queryParams]="{ redirect: 'profile' }" fragment="section1">About</a>
<a [routerLink]="['/user', userId]" [queryParams]="{ redirectTo: 'profile' }">User {{ userId }}</a>
```

此代码片段中，第一行routerLinkActive属性可以用于为导航到当前活动路由时添加类。 第二行queryParams属性演示了如何在路由之间传递查询参数和片段。 第三行演示了如何使用动态路径和查询参数导航到某个组件。