迹忆客 专注技术分享

本教程将介绍如何在 Angular 中创建导航栏并将其用于 Angular 应用程序中的导航。

Angular 中的导航栏

导航栏是任何 Web 应用程序的重要组成部分之一。即使在构建仅包含一个页面但不同部分的单页应用程序 (SPA) 时，我们仍然使用导航栏从一个部分导航到另一个部分。

导航栏使用户可以轻松地在你的 Web 应用程序中找到他们正在寻找的内容。

导航有很多方法可以实现从简单到复杂的路由。Angular 提供了一个单独的模块，可以帮助我们在 Web 应用程序中创建导航栏并将其用于导航。

如果我们想以编程方式将用户从一个页面导航到另一个页面，我们可以使用路由 navigate() 方法，这意味着我们在不使用确切链接的情况下导航组件。我们使用组件名称来代替。

在 Angular 中创建导航栏

让我们来看一个示例，在该示例中，我们将创建一个导航栏，并使用 navigate() 在不同的组件中导航。因此，让我们使用以下命令创建一个新应用程序。

# angular
ng new my-app

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

# angular
cd my-app

现在，让我们运行我们的应用程序以确保正确安装所有依赖项。

# angular
ng serve --open

在 Angular 中生成导航栏组件

现在，让我们生成导航栏组件。首先，我们将生成我们的 index 组件，它将充当我们应用程序的 home 组件。

# angular
ng generate component index

然后，我们将生成 about us 组件。

# angular
ng generate component aboutUs

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

# angular
ng generate component products

我们将在带有 3 个文件的单独文件夹中包含 3 个组件，你可以在下面看到。

输出：

为组件创建视图

现在，我们将为我们的组件创建视图。首先，我们将从 about 文件夹打开 aboutUs.component.html 并添加以下代码。

# angular
<div class="container" >
  <h1> This is about Us Component </h1>
  <h3> This is the content of About Us </h3>
</div>

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

# angular
<div class="container">
 <h1> This is index component </h1>
  <h3> This is the content of Index </h3>
</div>

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

# angular
<div class="container">
 <h1> This is products component </h1>
  <h3> This is the content of Products </h3>
</div>

定义组件路由

一旦我们创建了我们的组件和视图，我们将在 app-routing.module.ts 中定义我们的路由。

我们将导入 ngModule。我们还将从路由中导入 Routes 和 RouterModule，最后但并非最不重要的是，我们刚刚创建的组件。

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutUsComponent}  from './aboutUs/aboutUs.component';
import { IndexComponent} from './index/index.component';
import { ProductsComponent } from './products/products.component';

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

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

# angular
const routes: Routes = [

    { path: 'aboutUs', component: AboutUsComponent },
    { path: 'index', component: IndexComponent},
    { path: 'products', component: ProductsComponent },
 ];

创建导航菜单

然后我们将在 app.component.html 中创建导航菜单。每个链接都将使用 (click) 方法调用一个函数。

我们将使用 router-outlet 显示组件数据，如下所示。

# angular
<ul class="nav navbar-nav">
  <li>
    <a (click)="goToIndex()">Home</a>
  </li>
  <li>
    <a (click)="goToAboutUs()">About Us</a>
  </li>
  <li>
    <a (click)="goToProducts()">Products</a>
  </li>
</ul>

<router-outlet> </router-outlet>

创建在组件之间导航的函数

接下来，我们将创建函数 goToIndex()、goToAboutUs() 和 goToProducts()。我们将打开 app.component.ts 并导入 Router。

使用 router.navigate()，我们将创建这些函数来在组件之间导航。

# angular
import { Component } from '@angular/core';
import { Router } from '@angular/router';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private router: Router) {
  }

  goToIndex() {
    this.router.navigate(['/', 'index']);
  }
  goToAboutUs() {
    this.router.navigate(['/', 'aboutUs']);
  }
  goToProducts() {
    this.router.navigate(['/', 'products']);
  }
}

输出：

从示例中可以看出，我们可以轻松地在 Angular 应用程序中创建导航栏，并使用 navigate() 在组件之间导航并定义路由。