Material Design 是 Google 推出的一种设计语言，旨在为应用程序和网站提供一致的外观和感觉。在 Angular 中，我们可以使用 Angular Material 库来轻松地实现 Material Design 风格的 UI 组件。在本文中，我们将介绍如何在 Angular 中实现 Material Design 风格的导航栏。
安装 Angular Material
在使用 Angular Material 库之前，我们需要先安装它。可以使用以下命令在 Angular 项目中安装 Angular Material：
ng add @angular/material
这个命令将会自动安装 Angular Material 和它的依赖项，并会提示你选择要使用哪些主题和颜色。
创建导航栏组件
我们可以使用 Angular CLI 命令来创建一个新的导航栏组件：
ng generate component navbar
这个命令将会在 src/app 目录下创建一个新的 navbar 组件。在 navbar.component.html 文件中，我们可以添加以下代码来创建一个基本的导航栏：
<mat-toolbar color="primary"> <span>My App</span> <span class="spacer"></span> <button mat-button routerLink="/">Home</button> <button mat-button routerLink="/about">About</button> <button mat-button routerLink="/contact">Contact</button> </mat-toolbar>
这个导航栏包括一个应用程序的标题和三个链接按钮。我们使用 mat-toolbar 元素来创建一个 Material Design 风格的工具栏。color 属性设置工具栏的颜色为 primary。我们使用 mat-button 元素来创建 Material Design 风格的按钮。routerLink 属性将按钮链接到不同的路由。
在 navbar.component.scss 文件中，我们可以添加以下代码来样式化导航栏：
.spacer {
flex: 1 1 auto;
}这个样式将会创建一个弹性间隔，使得导航栏中的链接按钮靠右对齐。
集成导航栏
要将导航栏集成到 Angular 应用程序中，我们需要在 app.component.html 文件中添加以下代码：
<app-navbar></app-navbar> <router-outlet></router-outlet>
这个代码将会在应用程序的根组件中添加导航栏和路由出口。路由出口是一个占位符，用于显示当前路由的组件。
配置路由
我们需要在 app-routing.module.ts 文件中配置应用程序的路由。我们可以使用以下代码来创建三个路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - ---------------- - ---- ------------------------------ ----- ------- ------ - - - ----- --- ---------- ------------- -- - ----- -------- ---------- -------------- -- - ----- ---------- ---------- ---------------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
这个代码将会导入 Routes 和 RouterModule 模块，并创建了三个路由。每个路由都将会映射到一个组件。
创建路由组件
我们需要创建三个路由组件来匹配我们在路由中定义的路由。我们可以使用 Angular CLI 命令来创建这些组件：
ng generate component home ng generate component about ng generate component contact
这些命令将会在 src/app 目录下创建三个新的组件。在这些组件的 HTML 文件中，我们可以添加一些文本来显示它们的内容。
运行应用程序
现在，我们已经完成了在 Angular 中实现 Material Design 风格的导航栏所需的所有步骤。我们可以使用以下命令来运行应用程序：
ng serve
这个命令将会在浏览器中启动应用程序，并在 http://localhost:4200 上运行。
结论
在本文中，我们介绍了如何在 Angular 中实现 Material Design 风格的导航栏。我们使用 Angular Material 库创建了一个基本的导航栏，并在路由中配置了三个路由。我们还创建了三个路由组件来显示不同的内容。这个示例应该能够帮助你开始使用 Angular Material 来创建漂亮的 Material Design 风格的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6757aef4890bd9faa437457c