1. 先论

本笔记主要用于记录之用, 主要的学习参考于最新的Angular Material 10.2.0. 笔者水平有限, 建议直接英语官网阅读.

---

2. 概述

Angular提供了两种类型的组件, 用以给主要内容添加一些可折叠的附属内容.

• sidenav component
• drawer component

2.1 Sidenav 组件

Sidenav 组件是全局的, 适用于整个应用屏幕. 建立Sidenav, 我们需要三个组件:

• <mat-sidenav-container>: 作为一个整体的容器包含内容和侧边栏
• <mat-sidenav-content>: 主要(正文)内容
• <mat-sidenav>: 侧边栏的内容

2.2 Drawer 组件

Drawer 组件是用于局部的. 和Sidenav相似, 仍然需要三个组件(此处不赘述):

• <mat-drawer-container>
• <mat-drawer-content>
• <mat-drawer>

2.3 举例

<mat-drawer-container class="example-container"><mat-drawer mode="side" opened>Drawer content</mat-drawer><mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

---

3 深入理解

如上所示, Sidenav 组件和 Drawer 组件都是类似的, 故通过对Sidenav 组件进行学习, 思想类通.

3.1 确定正文和侧边栏内容

• 正文和侧边栏内容都应放在<mat-sidenav-container> 或者 <mat-drawer-container>中.
• 对于<mat-sidenav>或者<mat-drawer>, 必须作为<mat-sidenav-container>或者<mat-drawer-container>的直属(immediate)子节点.
• <mat-sidenav>或者<mat-drawer>拥有position属性, 默认值为start.
• 如果没有显示地定义<mat-sidenav-content>或者mat-drawer-content, 将会隐式地定义<mat-sidenav-content>或者<mat-drawer-content>.

例如:

<mat-sidenav-container class="example-container"><mat-sidenav opened mode="side">Start content</mat-sidenav><mat-sidenav opened mode="side" position="end">End content</mat-sidenav>Implicit main content
</mat-sidenav-container>

还有一些具体的例子, 参考官网资料.

3.2 打开和关闭侧边栏

• <mat-sidenav> 可以通过open(), close()和toggle()来进行打开和关闭的操作, 这些方法返回的值均为Promise<boolean>.
• 也可以通过属性绑定进行操作. 通过对<mat-sidenav>的opened属性, 该属性支持双向绑定.

举例:

<mat-sidenav-container class="example-container"><mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"(closed)="events.push('close!')">Sidenav content</mat-sidenav><mat-sidenav-content><p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p><p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p><p>Events:</p><div class="example-events"><div *ngFor="let e of events">{{e}}</div></div></mat-sidenav-content>
</mat-sidenav-container

events: string[] = [];
opened: boolean;

此处有必要解释一下HTML文件中的opened:

• 作为双向数据绑定
• Whether the drawer is opened. We overload this because we trigger an event when it starts or end. (官方API说明), 因为还用于了事件绑定.

3.3 改变侧边栏的行为

<mat-sidenav>总共有三种不同的状态 (当然只能用一个状态), 通过属性mode进行定义.
此处直接使用Angular Material中文站给出的中文翻译.

• over: 侧边栏浮在主内容上方，并用一个背景遮住主内容.
• push: 侧边栏把主内容挤出去，并用一个背景遮住主内容.
• side: 侧边栏和主内容并排显示，并收缩主内容的宽度，给侧边栏腾出空间.

over是默认的模式.

over和push默认会显示一个背景, 可以通过<mat-sidenav-container>的hasBackdrop属性进行自定义:

3.4 禁用自动关闭

点击背景或者按下ESC键会自动关闭一个已经打开了的侧边栏. 可以通过<mat-sidenav>的disableClose属性进行自定义.

3.5 其他

其他细节方面知识(我认为不是很重要了), 请参考官方文档

---

参考

• Angular Material

• Angular Material cn