Angular Material 侧边导航栏的 API 参考

import {MatSidenavModule} from '@angular/material/sidenav';

选择器： mat-drawer-content

方法
elementScrolled

返回在宿主元素上发生 scroll 事件时会触发的可观察对象。
返回值
Observable<Event>

getElementRef

获取视口的 ElementRef。
返回值
ElementRef<HTMLElement>

measureScrollOffset

测量相对于视口指定边缘的滚动偏移量。这个方法可以用来代替对 scrollLeft 或 scrollTop 的直接检查，因为各浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 该方法返回的值是标准化的，左右都总是指向滚动容器的左侧和右侧，与布局方向无关。start 和 end 在 LTR 上下文中指向左右，在 RTL 上下文则相反。
参数

from

"top" | "bottom" | "start" | "end" | "left" | "right"

要测量的边缘。
返回值
number

scrollTo

滚动到指定的偏移量。这是浏览器原生 scrollTo 方法的标准化版本，因为各个浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 对于此方法，无论布局方向如何，左右都总是指向滚动容器的左侧和右侧。start 和 end 在 LTR 上下文中分别指向左右，在 RTL 上下文中则相反。
参数

options

ExtendedScrollToOptions

指定要滚动到的偏移量。

该组件对应于一个可以在抽屉容器上打开的抽屉。

选择器： mat-drawer

Exported as: matDrawer
属性
名称 描述
@Input()

autoFocus: AutoFocusTarget | string | boolean

抽屉是否应该在打开时自动聚焦于第一个可聚焦元素。mode 设置为 side 时默认为 false，否则默认为 true。如果显式启用，焦点也可以移到 side 模式下的侧边导航中。
@Input()

disableClose: boolean

抽屉是否可以通过 escape 或点击背景板来关闭。
@Input()

mode: MatDrawerMode

抽屉的模式：'over'、'push' 或 'side'之一。
@Input()

opened: boolean

抽屉是否打开了。我们把它重载了，因为我们要在它开始或结束时触发一个事件。
@Input()

position: 'start' | 'end'

抽屉附着到的一侧。
@Output()

closedStart: Observable<void>

抽屉开始关闭时发出的事件。
@Output('positionChanged')

onPositionChanged: EventEmitter<void>

当抽屉的位置发生变化时会触发。
@Output()

openedChange: EventEmitter<boolean>

抽屉打开状态发生变化时发出的事件。
@Output()

openedStart: Observable<void>

抽屉开始打开时发出的事件。
方法
异步
close

关闭抽屉。
返回值
Promise<MatDrawerToggleResult>

异步
open

打开抽屉。
参数

openedVia ?

FocusOrigin

是通过按键、鼠标点击还是编程的方式打开抽屉。侧边导航关闭后，用于焦点管理。
返回值
Promise<MatDrawerToggleResult>

async
toggle

切换这个抽屉。
参数

isOpen

boolean = !this.opened

抽屉是否应该打开。

openedVia ?

FocusOrigin

是通过按键、鼠标点击还是编程的方式打开抽屉。侧边导航关闭后，用于焦点管理。
返回值
Promise<MatDrawerToggleResult>

<mat-drawer-container> 组件。

这是一两个 <mat-drawer> 的父组件，用于在内部验证状态，并协调背景板和内容的样式。

选择器： mat-drawer-container

Exported as: matDrawerContainer
属性
名称 描述
@Input()

autosize: boolean

是否要在任何抽屉大小发生变化时自动调整容器大小。

使用时风险自负！ 通过在每个变更检测周期中测量抽屉，启用此选项会导致布局抖动。可以通过 MAT_DRAWER_DEFAULT_AUTOSIZE 令牌进行全局配置。
@Input()

hasBackdrop: boolean

当其中一个侧边导航打开时，抽屉容器是否应该有背景板。如果明确设置为 true，side 模式下将为抽屉启用背景板。
@Output()

backdropClick: EventEmitter<void>

单击抽屉背景板时发出的事件。

end: MatDrawer | null

end 位置的子抽屉式。

scrollable: CdkScrollable

对包装了可滚动内容的 CdkScrollable 实例的引用。

start: MatDrawer | null

start 位置的子抽屉式。
方法
close

对开始和结束处的抽屉调用 close
open

对开始和结束处的抽屉调用 open
updateContentMargins

重新计算并更新该内容的内联样式。请注意，这应该谨慎使用，因为它会导致重排（reflow）。

选择器： mat-sidenav-content

方法
elementScrolled

返回在宿主元素上发生 scroll 事件时会触发的可观察对象。
返回值
Observable<Event>

getElementRef

获取视口的 ElementRef。
返回值
ElementRef<HTMLElement>

measureScrollOffset

测量相对于视口指定边缘的滚动偏移量。这个方法可以用来代替对 scrollLeft 或 scrollTop 的直接检查，因为各浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 该方法返回的值是标准化的，左右都总是指向滚动容器的左侧和右侧，与布局方向无关。start 和 end 在 LTR 上下文中指向左右，在 RTL 上下文则相反。
参数

from

"top" | "bottom" | "start" | "end" | "left" | "right"

要测量的边缘。
返回值
number

scrollTo

滚动到指定的偏移量。这是浏览器原生 scrollTo 方法的标准化版本，因为各个浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 对于此方法，无论布局方向如何，左右都总是指向滚动容器的左侧和右侧。start 和 end 在 LTR 上下文中分别指向左右，在 RTL 上下文中则相反。
参数

options

ExtendedScrollToOptions

指定要滚动到的偏移量。

选择器： mat-sidenav

Exported as: matSidenav
属性
名称 描述
@Input()

autoFocus: AutoFocusTarget | string | boolean

抽屉是否应该在打开时自动聚焦于第一个可聚焦元素。mode 设置为 side 时默认为 false，否则默认为 true。如果显式启用，焦点也可以移到 side 模式下的侧边导航中。
@Input()

disableClose: boolean

抽屉是否可以通过 escape 或点击背景板来关闭。
@Input()

fixedBottomGap: number

当侧边导航处于固定模式时，侧边导航底部与视口底部之间的间隙。
@Input()

fixedInViewport: boolean

侧边导航是否在视口中是固定的。
@Input()

fixedTopGap: number

当侧边导航处于固定模式时，侧边导航顶部与视口顶部之间的间隙。
@Input()

mode: MatDrawerMode

抽屉的模式：'over'、'push' 或 'side'之一。
@Input()

opened: boolean

抽屉是否打开了。我们把它重载了，因为我们要在它开始或结束时触发一个事件。
@Input()

position: 'start' | 'end'

抽屉附着到的一侧。
@Output()

closedStart: Observable<void>

抽屉开始关闭时发出的事件。
@Output('positionChanged')

onPositionChanged: EventEmitter<void>

当抽屉的位置发生变化时会触发。
@Output()

openedChange: EventEmitter<boolean>

抽屉打开状态发生变化时发出的事件。
@Output()

openedStart: Observable<void>

抽屉开始打开时发出的事件。
方法
异步
close

关闭抽屉。
返回值
Promise<MatDrawerToggleResult>

异步
open

打开抽屉。
参数

openedVia ?

FocusOrigin

是通过按键、鼠标点击还是编程的方式打开抽屉。侧边导航关闭后，用于焦点管理。
返回值
Promise<MatDrawerToggleResult>

async
toggle

切换这个抽屉。
参数

isOpen

boolean = !this.opened

抽屉是否应该打开。

openedVia ?

FocusOrigin

是通过按键、鼠标点击还是编程的方式打开抽屉。侧边导航关闭后，用于焦点管理。
返回值
Promise<MatDrawerToggleResult>

选择器： mat-sidenav-container

Exported as: matSidenavContainer
属性
名称 描述
@Input()

autosize: boolean

是否要在任何抽屉大小发生变化时自动调整容器大小。

使用时风险自负！ 通过在每个变更检测周期中测量抽屉，启用此选项会导致布局抖动。可以通过 MAT_DRAWER_DEFAULT_AUTOSIZE 令牌进行全局配置。
@Input()

hasBackdrop: boolean

当其中一个侧边导航打开时，抽屉容器是否应该有背景板。如果明确设置为 true，side 模式下将为抽屉启用背景板。
@Output()

backdropClick: EventEmitter<void>

单击抽屉背景板时发出的事件。

end: MatDrawer | null

end 位置的子抽屉式。

scrollable: CdkScrollable

对包装了可滚动内容的 CdkScrollable 实例的引用。

start: MatDrawer | null

start 位置的子抽屉式。
方法
close

对开始和结束处的抽屉调用 close
open

对开始和结束处的抽屉调用 open
updateContentMargins

重新计算并更新该内容的内联样式。请注意，这应该谨慎使用，因为它会导致重排（reflow）。

开关 Promise 的结果，用于标出抽屉的状态。

type MatDrawerToggleResult = 'open' | 'close';

抽屉和侧边导航显示模式。

type MatDrawerMode = 'over' | 'push' | 'side';

配置默认情况下抽屉是否应该自动调整大小。

const MAT_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;