Angular RouterLink的完整指南RouterModule 在Angular中提供RouterLink指令。

RouterModule 在Angular中提供RouterLink指令。RouterModule增加了路由器指令和提供者。RouterLink让我们链接到Angular应用程序中的特定路由。

Angular RouterLink

RouterLink是一个内置的Angular指令，可以让你链接到你的应用程序中的特定路线。在SPA（单页应用程序）中，你通过显示或隐藏与特定组件相对应的显示部分来改变用户看到的东西，而不是到服务器上获取一个新页面。

当用户需要执行应用任务时，他们必须在你定义的视图之间移动。为了在你的单页应用中实现不同路由之间的导航，可以使用Angular Router。

考虑一下下面的路由配置。[{ path: 'customer/:id', component: CustComponent }]。当链接到这个customer/:id路由时，你使用RouterLink指令。

如果有一个静态链接，你可以使用指令如下：**<a routerLink="/customer/21″>**链接到 cust 组件。

如果你使用动态值来生成链接，你可以传递路径段的数组，然后是每个段的参数。

例如 ['/group', groupId, 'user', userName, {full: true}] 表示我们要生成一个链接到/group/21/user/billy;full=true。

路由段

第一个段的名称可以用/、./，或...。/:

如果第一个网段以/开头，路由器将从应用程序的根查找路由。
假设第一个网段以.然后，/，或不以斜线开始，路由器将转而在当前激活的路由的子节点中查找。
而如果第一段以. ./开头的，路由器就会往上走一级。

在Angular中设置查询参数

要在Angular中设置查询参数，请使用以下语法：

<a [routerLink]="['/customer/jt']" [queryParams]="{purchase: true}">
  link to customer component
</a>

RouterLink将使用这些来生成这个链接。/customer/jt;purchase=true。

你可以提供一个[state](https://angular.io/api/animations/state) 值，以持久化到浏览器的History.state属性。

<a [routerLink]="['/customer/jt']" [state]="{transactionId: 123}">
  link to customer component
</a>

RouterLink的方法

RouterLink提供一个名为onClick()的方法。

onClick()方法不接受单一参数，并返回一个布尔值。

RouterLink指令的例子

要创建一个Angular 12项目，你必须升级Angular CLI。

要创建一个新的Angular项目，请输入以下命令。

在创建一个新项目时，请在选项中选择y来启用路由：

ng new angularguard

你可以给你的项目取任何你想要的名字。

现在，进入项目文件夹，安装Bootstrap CSS框架：

npm install bootstrap --save

在angular.json 文件中注册CSS文件：

"styles": [
       "src/styles.css",
       "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

现在，创建以下两个新的Angular组件：

HomeComponent
DashboardComponent

请输入下面的命令来创建它。

ng g c home --skipTests=true
ng g c dashboard --skipTests=true

创建组件后，我们将定义包含不同对象的路由数组。

所以，在app-routing.module.ts 文件中写下以下代码：

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent},
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

你可以在这里将不同的路由映射到不同的组件，最后，使用**RouterModule.forRoot()**函数注册所有的路由。

Router-Outlet是angular router库提供的指令，路由器在这里添加了基于当前浏览器的URL而被匹配的组件。

让我们在我们的例子中的app.component.html 文件中写下**** 指令。我们也将在app.component.html 中添加导航栏：

<nav class="navbar navbar-light navbar-expand-lg" style="background-color: #e3f2fd;">
  <div class="container">
    <a class="navbar-brand">AppDividend</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link">
            Home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link">
            Dashboard
            </a>
          </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <router-outlet></router-outlet>
</div>

你可以看到，我们没有在锚标签内写一个routerLink指令。

要从一个路由导航到另一个，我们必须写上routerLink指令。

routerLink指令需要一个我们已经在路由数组中定义的路由路径。

让我们添加这个指令：

<!-- app.component.html -->

<nav class="navbar navbar-light navbar-expand-lg" style="background-color: #e3f2fd;">
  <div class="container">
    <a routerLink="/" class="navbar-brand" routerLinkActive="active" >AppDividend</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <ng-container>
          <li class="nav-item">
            <a routerLink = "home" class="nav-link">
            Home
            </a>
          </li>
          <li class="nav-item">
            <a routerLink = "dashboard" class="nav-link">
            Dashboard
            </a>
          </li>
         </ng-container>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <router-outlet></router-outlet>
</div>

好了，现在我们有两个视图，我们可以使用routerLink在这些视图之间导航。

我们也可以像这样写routerLink 指令：

<ng-container>
      <li class="nav-item">
         <a [routerLink] = "['/home']" class="nav-link">
            Home
         </a>
      </li>
      <li class="nav-item">
         <a [routerLink] = "['/dashboard']" class="nav-link">
            Dashboard
         </a>
      </li>
</ng-container>

在Angular中传递查询参数

为了传递查询参数，你可以编写锚点标签：

<ng-container>
       <li class="nav-item">
          <a [routerLink] = "['/home']" [queryParams] = "{success: true}" class="nav-link">
            Home
          </a>
        </li>
        <li class="nav-item">
          <a [routerLink] = "['/dashboard']" class="nav-link">
            Dashboard
          </a>
        </li>
</ng-container>

用以下命令启动开发服务器：

ng serve -o

它将用**http://localhost:4200**URL打开浏览器。

点击主页链接，你会看到下面的URL。

http://localhost:4200/home?success=true

这就是了。我们已经成功地将查询参数传递给HomeComponent。

我们可以捕获参数并根据参数值设置一些条件。例如，在成功或失败时显示像bootstrap警报框一样的通知。

在home.component.ts 文件中写下以下代码：

// home.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  notify: string;
  constructor(private router: Router, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      if (params.success === 'true') {
        this.notify = 'You have passed data';
      }
    });
  }
}

在这段代码中，我们使用了queryParams.subscribe() 函数来获取传递给当前URL的查询参数。

基于这个条件，我们正在设置通知信息。

现在，在home.component.html 文件中写下以下代码：

<!-- home.component.html -->

<div *ngIf="notify" class="alert alert-success">
    {{ notify }}
</div>
<p>home works!</p>

好了，现在看看浏览器中的输出：

如果你从URL中删除查询参数，只点击这个URL：http://localhost:4200/home，你将不会得到任何通知信息。

总结

在这个例子中，我们已经看到了如何在导航中使用routerLink指令，传递查询参数和使用ActivatedRoute捕获queryParams。

本教程到此结束。

另请参见

Angular router navigate

Angular路由防护

Angular教程