Angular Material 7 – SideNav

Angular Material 7是由Angular JS团队维护的一套UI组件库，旨在让Web应用开发更容易，更高效。SideNav侧边导航栏是Angular Material 7中很常用的组件，主要用于在页面中添加导航条，提供菜单或链接的导航功能，下面就让我们来探讨一下如何实现这个组件。

安装Angular Material 7

首先，我们需要安装Angular Material 7。在命令行工具中输入以下命令：

npm install --save @angular/material @angular/cdk @angular/animations

然后，我们需要在我们的应用中引入这些组件：

// app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSidenavModule } from '@angular/material/sidenav';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatSidenavModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

加入SideNav组件

在我们的HTML页面中加入SideNav：

<!-- app.component.html -->

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <a mat-list-item href="#">NavItem 1</a>
      <a mat-list-item href="#">NavItem 2</a>
      <a mat-list-item href="#">NavItem 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <button (click)="sidenav.toggle()">Toggle Nav</button>
  </mat-sidenav-content>
</mat-sidenav-container>

这里我们使用了<mat-sidenav-container>作为其父元素，然后在这个容器组件下放置两个子元素：<mat-sidenav>和<mat-sidenav-content>。注意到<mat-sidenav>的标签上使用了一个叫做#sidenav的模板变量（template variable），这会让我们方便地在其他地方引用这个组件。<button>组件使用toggle()方法来改变<mat-sidenav>组件是否显示。

定制SideNav

接下来，我们可以使用一些属性和方法来定制我们的SideNav。假设我们现在要添加一些样式和图标，我们可以使用<mat-toolbar>组件和<mat-icon>组件来实现：

<!-- app.component.html -->

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-toolbar color="primary">My Navigation</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">
        <mat-icon>home</mat-icon>
        <span>Home</span>
      </a>
      <a mat-list-item href="#">
        <mat-icon>info</mat-icon>
        <span>About</span>
      </a>
      <a mat-list-item href="#">
        <mat-icon>settings</mat-icon>
        <span>Settings</span>
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <button (click)="sidenav.toggle()">Toggle Nav</button>
  </mat-sidenav-content>
</mat-sidenav-container>

这里我们使用<mat-toolbar>组件来添加一个导航栏的标题栏，并且使用color="primary"来设置样式。然后，我们使用<mat-icon>组件来为每个链接添加一个图标。

还有其他一些属性和方法可以使用，比如opened属性来控制SideNav是否默认展开，position属性来设置SideNav的位置等等。更多属性和方法请参考官方文档。

结论

Angular Material 7的SideNav组件是一个非常常用的UI组件，能够方便地实现一个导航栏，提供菜单或链接的导航功能。我们可以使用一些简单的HTML和一些定制工具来创建一个酷炫的SideNav。如果您想了解更多关于Angular Material 7和SideNav的知识，推荐您阅读官方文档并进行实践练习。希望这篇文章能够帮助您更好地掌握Angular Material 7中的SideNav组件。