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

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

1. 添加导航栏的UI引用

 

1	app.module.ts<br>import { MatToolbarModule } from '@angular/material/toolbar';<br>import { MatIconModule } from '@angular/material/icon';<br>...<br>imports: [<br>   ...<br>    MatToolbarModule,<br>    MatIconModule<br>]<br>

​2.用html构建导航栏

 

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

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

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

 

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

 

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