直播系統程式碼，自行更改導航欄樣式

直播系統程式碼，自行更改導航欄樣式實現的相關程式碼

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>

以上就是直播系統程式碼，自行更改導航欄樣式實現的相關程式碼， 更多內容歡迎關注之後的文章