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

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

注意

这不是强制性的——我们可以简单地使用 ng gc 命令来创建组件，但是还有另一种可能的共享方式 ）

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”

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

请参考下面的截图：

就这样。成功！

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

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

所以，它按预期工作！

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

•  navbar-header
• navbar-nav

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