迹忆客 专注技术分享

我们将在 Angular 中引入 routerLink 方法并使用该方法进行导航。

Angular 中的路由链接

导航是任何 Web 应用程序或网站中最重要的部分之一。即使在创建只有一页的单页应用程序 (SPA) 时，我们仍然使用导航从一个部分跳转到另一个部分。

导航使用户可以轻松地在 Web 应用程序中找到他们要查找的内容。通过提供简单易懂的导航，我们可以使我们的应用程序用户友好且易于使用。

Angular 提供了许多导航方法，可以轻松实现从简单到复杂的路由。Angular 提供了一个单独的模块 RouterModule 来在我们的 Web 应用程序中设置导航。

单页应用程序 (SPA) 没有要链接到的不同页面，但它显示不同的视图。通常我们使用 HTML 显示一个链接，如下所示。

# angular
<a href="/link">
  Example link in HTML.
</a>

Angular 为我们提供了一个指令 routerLink，它可以用来代替 href，如下所示。

# angular
<a routerLink="/home">
  Link Name.
</a>

routerLink 有两种使用方式，一种作为字符串使用，另一种作为数组使用，如下图。

# angular
<a routerLink="/home">
  Link used as a string.
</a>
<a [routerLink]="['/', 'user', 'fakhar']">
  Link used as an array.
</a>

当我们想要在链接中传递参数时使用 [routerLink]，而当我们想要链接时使用 routerLink。我们将通过一个示例，在该示例中，我们将使用 routerLink 浏览不同的组件。

因此，让我们使用以下命令创建一个新应用程序。

# angular
ng new my-app

在 Angular 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

# angular
cd my-app

让我们运行我们的应用程序来检查所有依赖项是否都安装正确。

# angular
ng serve --open

我们将使用命令生成组件。首先，我们将生成我们的 home 组件。

# angular
ng generate component home

一旦我们生成了我们的 home 组件，我们将生成我们的 about 组件。

# angular
ng generate component about

最后，我们使用以下命令生成我们的 services 组件。

# angular
ng generate component services

生成我们的组件后，我们将在单独的文件夹中拥有三个组件，其中包含 3 个文件。

输出：

一旦我们生成了我们的组件，我们将创建视图。首先，我们将从 about 文件夹中打开 about.component.html 并添加以下代码。

# angular
<div class="container" >
  <h1> This is about Component </h1>
  <h3> Try navigating to other components </h3>
</div>

我们将打开 home 文件夹中的 home.component.html 文件并添加以下代码。

# angular
<div class="container">
 <h1> This is home component </h1>
 <h3> Try navigating to other components </h3>
</div>

我们将打开 services 文件夹中的 services.component.html 文件并添加以下代码。

# angular
<div class="container">
 <h1> This is Services component </h1>
 <h3> Try navigating to other components </h3>
</div>

一旦我们准备好我们的组件和视图，我们将在 app-routing.module.ts 中定义我们的路由。我们将导入 ngModule。

我们还将从 router 导入 Routes 和 RouterModule 并导入我们创建的组件。

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

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

导入所有内容后，我们将定义到组件的路由，如下所示。

# angular
const routes: Routes = [

    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent},
    { path: 'services', component: ServicesComponent },
 ];

我们将在 app.component.html 中创建导航菜单。我们将使用 routerLink 从我们刚刚定义的路由中获取链接，并使用 router-outlet 来显示我们组件的内容。

<ul class="nav navbar-nav">
  <li>
    <a routerLink="/home">Home</a>
  </li>
  <li>
    <a routerLink="/about">About</a>
  </li>
  <li>
    <a routerLink="/services">Services</a>
  </li>
</ul>

<router-outlet> </router-outlet>

输出：

上面的例子表明，我们可以使用 routerLink 并定义路由轻松地从一个组件导航到另一个组件。

所以在本文中，我们学习了如何创建组件和定义路由，使用 routerLink 在组件之间轻松导航，以及使用 routerLink 和 [routerLink]。