Angular 中的 routerlink

Angular 2周前 19

我们将在 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 个文件。

输出：

Angular 中的 routerlink

一旦我们生成了我们的组件，我们将创建视图。首先，我们将从 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>

输出：

Angular 中的 routerlink