直播系统代码，自行更改导航栏样式

直播系统代码，自行更改导航栏样式实现的相关代码

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>

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>

 

以上就是直播系统代码，自行更改导航栏样式实现的相关代码， 更多内容欢迎关注之后的文章