Angular Material bottom-sheet API 参考文档
import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
MatBottomSheet
用于触发 Material Design 底部操作表的服务。
Service to trigger Material Design bottom sheets.
方法
| dismiss | |
|---|---|
|
关掉当前可见的底部操作表。 Dismisses the currently-visible bottom sheet. |
|
参数 Parameters |
|
|
result? R
|
要传递给底部操作表实例的数据。 Data to pass to the bottom sheet instance. |
| open | |
|---|---|
|
打开一个包含指定组件的底部操作表。 Opens a bottom sheet containing the given component. |
|
参数 Parameters |
|
|
component ComponentType<T>
|
要装入底部操作表的组件类型。 Type of the component to load into the bottom sheet. |
|
config? MatBottomSheetConfig<D>
|
额外的配置选项。 Extra configuration options. |
返回值 Returns |
|
MatBottomSheetRef<T, R>
|
指向新打开的底部操作表的引用。 Reference to the newly-opened bottom sheet. |
| open | |
|---|---|
|
打开一个包含指定模板的底部操作表。 Opens a bottom sheet containing the given template. |
|
参数 Parameters |
|
|
template TemplateRef<T>
|
要用作底部操作表内容的 TemplateRef。 TemplateRef to instantiate as the bottom sheet content. |
|
config? MatBottomSheetConfig<D>
|
额外的配置选项。 Extra configuration options. |
返回值 Returns |
|
MatBottomSheetRef<T, R>
|
指向新打开的底部操作表的引用。 Reference to the newly-opened bottom sheet. |
MatBottomSheetConfig
打开底部操作表时使用的配置。
Configuration used when opening a bottom sheet.
属性
| 名称 | 描述 |
|---|---|
|
指定给底部操作表元素的 Aria 标签。 Aria label to assign to the bottom sheet element. |
|
在打开底部操作表时是否应该让第一个可获得焦点的元素获取焦点。 Whether the bottom sheet should focus the first focusable element on open. |
|
背景板的自定义类。 Custom class for the backdrop. |
|
当用户在历史记录中前进或后退时，底部操作表是否应该关闭。请注意，这通常不包括单击某些链接（除非用户正在使用 Whether the bottom sheet should close when the user goes backwards/forwards in history.
Note that this usually doesn't include clicking on links (unless the user is using
the |
|
注入到子组件中的数据。 Data being injected into the child component. |
|
底部操作表的文本布局方向。 Text layout direction for the bottom sheet. |
|
用户是否可以使用 escape 或单击外部来关闭底部操作表。 Whether the user can use escape or clicking outside to close the bottom sheet. |
|
底部操作表是否有背景板。 Whether the bottom sheet has a backdrop. |
|
要添加到底部操作表容器中的额外 CSS 类。 Extra CSS classes to be added to the bottom sheet container. |
|
关闭底部操作表时是否应该把焦点还给以前拥有焦点的元素。 Whether the bottom sheet should restore focus to the previously-focused element, after it's closed. |
|
用于底部操作表的滚动策略。 Scroll strategy to be used for the bottom sheet. |
|
用于放置底部操作表浮层的容器。 The view container to place the overlay for the bottom sheet into. |
MatBottomSheetRef
引用来自底部操作表服务的底部操作表。
Reference to a bottom sheet dispatched from the bottom sheet service.
属性
| 名称 | 描述 |
|---|---|
|
是否允许用户关闭底部操作表。 Whether the user is allowed to close the bottom sheet. |
|
该组件的实例组成了底部操作表的内容。 Instance of the component making up the content of the bottom sheet. |
方法
| afterDismissed | |
|---|---|
|
获取一个可观察对象，当底部操作表已经完成并关闭时，它会收到通知。 Gets an observable that is notified when the bottom sheet is finished closing. |
|
返回值 Returns |
|
Observable<R | undefined>
|
|
| afterOpened | |
|---|---|
|
获取一个可观察对象，当底部操作表已经打开并出现时，它会收到通知。 Gets an observable that is notified when the bottom sheet has opened and appeared. |
|
返回值 Returns |
|
Observable<void>
|
|
| backdropClick | |
|---|---|
|
获取一个可观察对象，当点击浮层的背景板时，它会发出数据。 Gets an observable that emits when the overlay's backdrop has been clicked. |
|
返回值 Returns |
|
Observable<MouseEvent>
|
|
| dismiss | |
|---|---|
|
关闭底部操作表。 Dismisses the bottom sheet. |
|
参数 Parameters |
|
|
result? R
|
要传递回底部操作表的数据。 Data to be passed back to the bottom sheet opener. |
| keydownEvents | |
|---|---|
|
获取一个可观察对象，当指定浮层收到 keydown 事件时，它会发出数据。 Gets an observable that emits when keydown events are targeted on the overlay. |
|
返回值 Returns |
|
Observable<KeyboardEvent>
|
|
MAT_BOTTOM_SHEET_DEFAULT_OPTIONS
这个注入令牌可以用来指定底部操作表的默认选项。
Injection token that can be used to specify default bottom sheet options.
const MAT_BOTTOM_SHEET_DEFAULT_OPTIONS: InjectionToken<MatBottomSheetConfig<any>>;
MAT_BOTTOM_SHEET_DATA
这个注入令牌可以用来访问那些传入底部操作表的数据。
Injection token that can be used to access the data that was passed in to a bottom sheet.
const MAT_BOTTOM_SHEET_DATA: InjectionToken<any>;
matBottomSheetAnimations
Material 底部操作表使用的动画。
Animations used by the Material bottom sheet.
const matBottomSheetAnimations: { readonly bottomSheetState: AnimationTriggerMetadata; };
Angular Material bottom-sheet-testing API 参考文档
import {MatBottomSheetHarness} from '@angular/material/bottom-sheet/testing';
MatBottomSheetHarness
extends
ContentContainerComponentHarness
在测试中与标准 MatBottomSheet 进行交互的测试工具。
Harness for interacting with a standard MatBottomSheet in tests.
方法
异步
dismiss
|
|
|---|---|
|
按下 escape 即可关闭底部操作表。注意，如果通过配置把 “disableClose” 设置成了 true，就不能使用这个方法。 Dismisses the bottom sheet by pressing escape. Note that this method cannot be used if "disableClose" has been set to true via the config. |
|
返回值 Returns |
|
Promise<void>
|
Promise that resolves when the action completes. |
异步
getAllChildLoaders
|
|
|---|---|
参数 Parameters |
|
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader[]>
|
|
异步
getAllHarnesses
|
|
|---|---|
参数 Parameters |
|
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T[]>
|
|
异步
getAriaLabel
|
|
|---|---|
|
获取底部操作表 “aria-label” 属性的值。 Gets the value of the bottom sheet's "aria-label" attribute. |
|
返回值 Returns |
|
Promise<string | null>
|
|
异步
getChildLoader
|
|
|---|---|
参数 Parameters |
|
|
selector S
|
|
返回值 Returns |
|
Promise<HarnessLoader>
|
|
异步
getHarness
|
|
|---|---|
参数 Parameters |
|
|
query HarnessQuery<T>
|
|
返回值 Returns |
|
Promise<T>
|
|
异步
host
|
|
|---|---|
|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 Returns |
|
Promise<TestElement>
|
|