Angular完整项目开发4 - 添加主页导航栏

常规的企业级管理系统，一般都要有主页导航栏。本篇在Angular项目中增加导航栏。

1. 添加导航栏的UI引用

app.module.ts

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
...
imports: [
   ...
    MatToolbarModule,
    MatIconModule
]

 

2.用html构建导航栏

app.component.html

<!-- Toolbar -->
<mat-toolbar color = "primary">
  <mat-toolbar-row>
    <span>小鹰信息技术服务部数据中心</span>
    <button mat-button>设备</button>
    <button mat-button>用户</button>
  </mat-toolbar-row>
</mat-toolbar>

<router-outlet></router-outlet>

效果：

系统名称和模块名称似乎靠得太近了，并且导航栏太高了，占的面积太大，应该压扁一些，CSS样式修改一下：

<mat-toolbar color = "primary" style="min-height: 40px;">
  <mat-toolbar-row style="height:40px">
    <button mat-button style="font-family:微软雅黑;">小鹰信息技术服务部数据中心</button>
    <button mat-button>设备</button>
    <button mat-button>用户</button>
  </mat-toolbar-row>
</mat-toolbar>

效果：

3.为导航栏的按钮添加组件路径

导航栏的外形做好了，现在要让导航栏起作用，比如点击一个按钮就进入对应的版块。方法是为<button>元素添加routerLink。

app.component.html

<button mat-button [routerLink]="'/'" style="font-family:微软雅黑;">小鹰信息技术服务部数据中心</button>
<button mat-button [routerLink]="'/device'">设备</button>
<button mat-button [routerLink]="'/sysuser'">用户</button>

效果：

 

到此，系统的导航栏就基本做好了。后续只要增加导航栏的按钮并为其设置组件路径routerLink即可。

 

*******************************************************************

在修改mat-toolbar高度的时候遇到了问题，常规操作无法解决，找到了如下的方法：

参考：https://www.reddit.com/r/angularjs/comments/2yfb9u/change_height_of_toolbar_material_design/