让我们开发一个 Angular 应用程序 – 创建一个导航栏组件

作者 : 慕源网 本文共1764个字,预计阅读时间需要5分钟 发布时间: 2022-01-11 共227人阅读

介绍

这是我的“让我们开发一个 Angular 应用程序”系列文章中的第 7 篇文章。到目前为止,我们创建了一个 Angular 应用程序和一些组件,为我们的 Bike 实体创建了一个模型类,并创建了一组硬编码的 Bike 细节。然后,我们使用 ngFor 在硬编码数组中显示自行车详细信息。此外,我们安装并应用了一些bootstrap classes来改进 UI。

请阅读之前的文章,以全面了解我们正在努力实现的目标。

要阅读我之前的文章,请点击这里 >>  #6 – Bootstrap 安装和使用

目前,我们的应用程序 UI 如下图所示。

让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

由于我们正在创建一个 Web 应用程序,因此最好有一个导航栏。让我们为导航栏创建一个新组件。上次,我们使用了 ng generate component 命令来创建组件。这一次,我们可以尝试手动创建组件。请按照以下步骤手动创建和配置组件。

注意

这不是强制性的——我们可以简单地使用 ng gc 命令来创建组件,但是还有另一种可能的共享方式 让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

  1. 在 app 文件夹下创建一个新文件夹 ‘navigation-bar’ (Rclick app -> New Folder)
  2. 在新文件夹中创建一个typescript 文件“navigation-bar.component.ts”文件(RClick navigation-bar -> New File)
  3. 在新文件夹中创建一个 HTML 文件“navigation-bar.component.html”
  4. 在新文件夹中创建一个 CSS 文件“navigation-bar.component.css”

让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

打开“‘navigation-bar.component.ts”文件

创建一个类’NavigationBarComponent’

export class NavigationBarComponent    
{      
} 

这只是一个普通的typescript 类。我们需要将其转换为 Component 类。

为此,我们使用 @Component() 装饰器

在 NavigationBarComponent 类的顶部添加代码

import { Component } from '@angular/core';    
    
@Component({    
    selector:'app-navaiagation-bar',    
    templateUrl:'./navigation-bar.component.html',    
    styleUrls:['./navigation-bar.component.css']    
    })    

现在我们的组件类型脚本文件将如下图所示。

让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

要获取有关 Angular 组件的更多详细信息,请访问 >> https://angular.io/guide/architecture-components。 接下来,我们需要在 app.module.ts 中注册组件 打开 app.module.ts 文件,并在 @NgModule 装饰器的声明数组中添加类名“NavigationBarComponent”。此外,从“./navigation-bar/navigation-bar.component”导入类。

请参考下面的截图:

让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

就这样。成功!

我们手动创建了一个组件并正确注册。让我们检查一下我们的新组件是否工作。在我们的 navigation-bar.component.html 文件中添加一个 <div> 元素,如下所示提供引导类 navbar 和 navbar-default,如下面的屏幕截图所示。

让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

打开 app.component.html 文件并使用它的选择器添加我们的组件,如下所示:

让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

保存文件并检查浏览器。我们可以看到在我们的应用程序中创建了一个导航栏,如下面的屏幕截图所示。

让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

所以,它按预期工作!

接下来,我们必须创建导航栏标题和导航栏菜单。我们可以使用以下 2 个引导类来执行此操作

  •  navbar-header
  • navbar-nav

我添加了 HTML 元素来创建导航栏标题和导航栏菜单。

我们将添加angular 路由。

请参考下面的截图:

让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

保存并检查浏览器以查看结果

现在我们将看到如下屏幕截图所示的屏幕:

让我们开发一个 Angular 应用程序 - 创建一个导航栏组件

结论

在本文中,我们使用bootstrap 创建了一个导航栏组件并创建了一些虚拟菜单。

我们将很快实现angular 路由。在下一篇文章中,我们将看到如何在图块右侧显示更多自行车详情。

要阅读我的下一篇文章,请点击这里 >>  #8 – 为 Bikes 创建详细视图组件模板


慕源网 » 让我们开发一个 Angular 应用程序 – 创建一个导航栏组件

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录