Angular CDK scrolling API 参考文档
import {ScrollingModule} from '@angular/cdk/scrolling';
服务
ScrollDispatcher
本服务包含所有已注册的可滚动对象的引用,并在任何一个可滚动对象的引用发出滚动事件时触发事件。
Service contained all registered Scrollable references and emits an event when any one of the Scrollable references emit a scrolled event.
属性
名称 | 描述 |
---|---|
|
所有可滚动对象引用的映射表,由可滚动对象及其对滚动事件的订阅组成。 Map of all the scrollable references that are registered with the service and their scroll event subscriptions. |
方法
ancestorScrolled | |
---|---|
返回一个可观察对象,它只在元素的任何可滚动祖先发生滚动时才会触发。 Returns an observable that emits whenever any of the scrollable ancestors of an element are scrolled. |
|
参数 Parameters |
|
elementOrElementRef HTMLElement | ElementRef<any>
|
祖先要监听的元素。 Element whose ancestors to listen for. |
auditTimeInMs? number
|
要对滚动事件进行限流的毫秒数。 Time to throttle the scroll events. |
返回值 Returns |
|
Observable<CdkScrollable | void>
|
|
deregister | |
---|---|
注销一个可滚动对象的引用,并从它的 scroll 事件的可观察对象中取消订阅。 Deregisters a Scrollable reference and unsubscribes from its scroll event observable. |
|
参数 Parameters |
|
scrollable CdkScrollable
|
要注销的可滚动实例。 Scrollable instance to be deregistered. |
getAncestorScrollContainers | |
---|---|
返回所有包含所指定元素的已注册可滚动对象。 Returns all registered Scrollables that contain the provided element. |
|
参数 Parameters |
|
elementOrElementRef HTMLElement | ElementRef<any>
|
|
返回值 Returns |
|
CdkScrollable[]
|
|
register | |
---|---|
使用该服务注册一个可滚动的实例,并侦听其滚动的事件。当可滚动对象发生滚动时,此服务会把事件发送到记录其滚动的可观察对象中。 Registers a scrollable instance with the service and listens for its scrolled events. When the scrollable is scrolled, the service emits the event to its scrolled observable. |
|
参数 Parameters |
|
scrollable CdkScrollable
|
要注册的可滚动对象实例。 Scrollable instance to be registered. |
scrolled | |
---|---|
返回一个可观察对象,它会在任何已注册的可滚动对象引用(或 window, document, body)中发生滚动事件时发出一个事件。可以提供一个毫秒数来来改写默认的“限流”时间。 Returns an observable that emits an event whenever any of the registered Scrollable references (or window, document, or body) fire a scrolled event. Can provide a time in ms to override the default "throttle" time. 注意:为了避免每次滚动事件都发生变更检测,从这个流发出的所有事件都会在 Angular Zone 之外运行。如果你要在滚动事件中更新任何数据绑定,就必须使用 Note: in order to avoid hitting change detection for every scroll event,
all of the events emitted from this stream will be run outside the Angular zone.
If you need to update any data bindings as a result of a scroll event, you have
to run the callback using |
|
参数 Parameters |
|
auditTimeInMs number = DEFAULT_SCROLL_TIME
|
|
返回值 Returns |
|
Observable<CdkScrollable | void>
|
|
指令
CdkScrollable
该指令的元素发生滚动时发送一个事件。使用 ScrollDispatcher 服务注册自己,以便把自己包含在滚动事件集合中,并通过该服务来监听。
Sends an event when the directive's element is scrolled. Registers itself with the ScrollDispatcher service to include itself as part of its collection of scrolling events that it can be listened to through the service.
属性
名称 | 描述 |
---|---|
|
|
|
|
|
|
|
方法
elementScrolled | |
---|---|
返回在宿主元素上发生 scroll 事件时会触发的可观察对象。 Returns observable that emits when a scroll event is fired on the host element. |
|
返回值 Returns |
|
Observable<Event>
|
|
getElementRef | |
---|---|
获取视口的 ElementRef。 Gets the ElementRef for the viewport. |
|
返回值 Returns |
|
ElementRef<HTMLElement>
|
|
measureScrollOffset | |
---|---|
测量相对于视口指定边缘的滚动偏移量。这个方法可以用来代替对 scrollLeft 或 scrollTop 的直接检查,因为各浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 该方法返回的值是标准化的,左右都总是指向滚动容器的左侧和右侧,与布局方向无关。 start 和 end 在 LTR 上下文中指向左右,在 RTL 上下文则相反。 Measures the scroll offset relative to the specified edge of the viewport. This method can be used instead of directly checking scrollLeft or scrollTop, since browsers are not consistent about what scrollLeft means in RTL. The values returned by this method are normalized such that left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
参数 Parameters |
|
from "top" | "bottom" | "start" | "end" | "left" | "right"
|
要测量的边缘。 The edge to measure from. |
返回值 Returns |
|
number
|
|
scrollTo | |
---|---|
滚动到指定的偏移量。这是浏览器原生 scrollTo 方法的标准化版本,因为各个浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 对于此方法,无论布局方向如何,左右都总是指向滚动容器的左侧和右侧。start 和 end 在 LTR 上下文中分别指向左右,在 RTL 上下文中则相反。 Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo method, since browsers are not consistent about what scrollLeft means in RTL. For this method left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
参数 Parameters |
|
options ExtendedScrollToOptions
|
指定要滚动到的偏移量。 specified the offsets to scroll to. |
CdkFixedSizeVirtualScroll
支持固定大小的虚拟滚动策略。
A virtual scroll strategy that supports fixed-size items.
属性
名称 | 描述 |
---|---|
@Input()
|
列表中条目的大小(以像素为单位)。 The size of the items in the list (in pixels). |
@Input()
|
渲染新条目时要渲染的缓冲区的像素数。默认为 200px。 The number of pixels worth of buffer to render for when rendering new items. Defaults to 200px. |
@Input()
|
缓存在视口之外的最小缓冲区数(以像素为单位)。当缓冲区的数量低于这个数时,就会渲染出更多的条目。默认为 100px。 The minimum amount of buffer rendered beyond the viewport (in pixels). If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px. |
CdkVirtualForOf
类似于 ngForOf
的指令,用于渲染虚拟滚动容器中的数据。
A directive similar to ngForOf
to be used for rendering data inside a virtual scrolling
container.
属性
名称 | 描述 |
---|---|
@Input()
|
要显示的 DataSource。 The DataSource to display. |
@Input()
|
用来生成新元素的模板。 The template used to stamp out new elements. |
@Input()
|
缓存的大小,用于存放那些以前没有用过的模板。如果将缓存大小设置为 The size of the cache used to store templates that are not being used for re-use later.
Setting the cache size to |
@Input()
|
The |
|
只要当前 DataSource 中的数据发生变化,就会发出通知。 Emits whenever the data in the current DataSource changes. |
|
当渲染的数据视图发生变化时触发。 Emits when the rendered view of the data changes. |
方法
measureRangeSize | |
---|---|
测量指定范围内所有条目的组合大小(水平方向的宽度,垂直方向的高度)。如果该范围包含当前尚未渲染过的条目,则会引发错误。 Measures the combined size (width for horizontal orientation, height for vertical) of all items in the specified range. Throws an error if the range includes items that are not currently rendered. |
|
参数 Parameters |
|
range ListRange
|
|
orientation "vertical" | "horizontal"
|
|
返回值 Returns |
|
number
|
|
CdkVirtualScrollViewport
extends
CdkScrollable
借助 CdkVirtualForOf
虚拟化滚动行为的视口。
A viewport that virtualizes its scrolling with the help of CdkVirtualForOf
.
属性
名称 | 描述 |
---|---|
@Input()
|
视口滚动的方向。 The direction the viewport scrolls. |
@Output()
|
当视口中可见的第一个元素的索引发生变化时触发。 Emits when the index of the first element visible in the viewport changes. |
|
|
|
每当渲染范围发生变化时都会发出通知的流。 A stream that emits whenever the rendered range changes. |
方法
attach | |
---|---|
把 Attaches a |
|
参数 Parameters |
|
forOf CdkVirtualScrollRepeater<any>
|
|
checkViewportSize | |
---|---|
更新视口规格并重新渲染。 Update the viewport dimensions and re-render. |
detach | |
---|---|
拆除当前的 Detaches the current |
elementScrolled | |
---|---|
返回在宿主元素上发生 scroll 事件时会触发的可观察对象。 Returns observable that emits when a scroll event is fired on the host element. |
|
返回值 Returns |
|
Observable<Event>
|
|
getDataLength | |
---|---|
获取绑定到该视口的数据的长度(以条目数表示)。 Gets the length of the data bound to this viewport (in number of items). |
|
返回值 Returns |
|
number
|
|
getElementRef | |
---|---|
获取视口的 ElementRef。 Gets the ElementRef for the viewport. |
|
返回值 Returns |
|
ElementRef<HTMLElement>
|
|
getOffsetToRenderedContentStart | |
---|---|
获取从视口起点到渲染数据起始位置的偏移量(以像素为单位)。 Gets the offset from the start of the viewport to the start of the rendered data (in pixels). |
|
返回值 Returns |
|
number | null
|
|
getRenderedRange | |
---|---|
获取当前渲染的条目范围。 Get the current rendered range of items. |
|
返回值 Returns |
|
ListRange
|
|
getViewportSize | |
---|---|
获取视口的大小(以像素为单位)。 Gets the size of the viewport (in pixels). |
|
返回值 Returns |
|
number
|
|
measureRangeSize | |
---|---|
测量指定范围的总组合大小。如果该范围包含未渲染的条目,则抛出此异常。 Measure the total combined size of the given range. Throws if the range includes items that are not rendered. |
|
参数 Parameters |
|
range ListRange
|
|
返回值 Returns |
|
number
|
|
measureRenderedContentSize | |
---|---|
测量所有渲染条目的组合大小。 Measure the combined size of all of the rendered items. |
|
返回值 Returns |
|
number
|
|
measureScrollOffset | |
---|---|
从视口的开头得到当前的滚动偏移量(以像素为单位)。 Gets the current scroll offset from the start of the viewport (in pixels). |
|
参数 Parameters |
|
from? "top" | "bottom" | "start" | "end" | "left" | "right"
|
测量到边缘的偏移。在垂直模式下默认为 “top”,在水平模式下默认为 “start”。 The edge to measure the offset from. Defaults to 'top' in vertical mode and 'start' in horizontal mode. |
返回值 Returns |
|
number
|
|
scrollTo | |
---|---|
滚动到指定的偏移量。这是浏览器原生 scrollTo 方法的标准化版本,因为各个浏览器对于 scrollLeft 在 RTL 中的理解并不一致。 对于此方法,无论布局方向如何,左右都总是指向滚动容器的左侧和右侧。start 和 end 在 LTR 上下文中分别指向左右,在 RTL 上下文中则相反。 Scrolls to the specified offsets. This is a normalized version of the browser's native scrollTo method, since browsers are not consistent about what scrollLeft means in RTL. For this method left and right always refer to the left and right side of the scrolling container irrespective of the layout direction. start and end refer to left and right in an LTR context and vice-versa in an RTL context. |
|
参数 Parameters |
|
options ExtendedScrollToOptions
|
指定要滚动到的偏移量。 specified the offsets to scroll to. |
scrollToIndex | |
---|---|
滚动到指定索引处的偏移量。 Scrolls to the offset for the given index. |
|
参数 Parameters |
|
index number
|
要滚动的元素的索引。 The index of the element to scroll to. |
behavior ScrollBehavior = 'auto'
|
滚动时要使用的 ScrollBehavior。行为默认是 The ScrollBehavior to use when scrolling. Default is behavior is |
scrollToOffset | |
---|---|
从视口开始处滚动到指定的偏移量。请注意,这并不会总是与设置 Scrolls to the given offset from the start of the viewport. Please note that this is not always
the same as setting |
|
参数 Parameters |
|
offset number
|
要滚动到的偏移量。 The offset to scroll to. |
behavior ScrollBehavior = 'auto'
|
滚动时要使用的 ScrollBehavior。行为默认是 The ScrollBehavior to use when scrolling. Default is behavior is |
setRenderedContentOffset | |
---|---|
设置从视口起点到渲染数据起点或终点的偏移量(以像素为单位)。 Sets the offset from the start of the viewport to either the start or end of the rendered data (in pixels). |
|
参数 Parameters |
|
offset number
|
|
to "to-start" | "to-end" = 'to-start'
|
|
setRenderedRange | |
---|---|
设置当前渲染的索引范围。 Sets the currently rendered range of indices. |
|
参数 Parameters |
|
range ListRange
|
|
setTotalContentSize | |
---|---|
设置所有内容的总大小(以像素为单位),包括当前未渲染的内容。 Sets the total size of all content (in pixels), including content that is not currently rendered. |
|
参数 Parameters |
|
size number
|
|
类
FixedSizeVirtualScrollStrategy
具有固定大小已知条目列表的虚拟滚动策略。
Virtual scrolling strategy for lists with items of known fixed size.
方法
attach | |
---|---|
把这个滚动策略附加到视口中。 Attaches this scroll strategy to a viewport. |
|
参数 Parameters |
|
viewport CdkVirtualScrollViewport
|
要把此策略附加到的视口。 The viewport to attach this strategy to. |
detach | |
---|---|
这个滚动策略是从当前连接的视口中拆除出来的。 Detaches this scroll strategy from the currently attached viewport. |
scrollToIndex | |
---|---|
滚动到指定索引的偏移量。 Scroll to the offset for the given index. |
|
参数 Parameters |
|
index number
|
要滚动的元素的索引。 The index of the element to scroll to. |
behavior ScrollBehavior
|
滚动时要使用的 ScrollBehavior。 The ScrollBehavior to use when scrolling. |
updateItemAndBufferSize | |
---|---|
更新条目大小和缓冲区大小。 Update the item size and buffer size. |
|
参数 Parameters |
|
itemSize number
|
虚拟滚动列表中各条目的大小。 The size of the items in the virtually scrolling list. |
minBufferPx number
|
在需要渲染更多内容之前,缓冲区的最小量(以像素为单位) The minimum amount of buffer (in pixels) before needing to render more |
maxBufferPx number
|
渲染时要渲染的缓冲区(以像素为单位)。 The amount of buffer (in pixels) to render when rendering more. |
接口
ViewportScrollPosition
在每个方向上保存视口滚动位置的对象。
Object that holds the scroll position of the viewport in each direction.
属性
名称 | 描述 |
---|---|
|
|
|
VirtualScrollStrategy
该策略决定了应该在视口中渲染哪些条目。
A strategy that dictates which items should be rendered in the viewport.
属性
名称 | 描述 |
---|---|
|
当视口中可见的第一个元素的索引发生变化时触发。 Emits when the index of the first element visible in the viewport changes. |
方法
attach | |
---|---|
把这个滚动策略附加到视口中。 Attaches this scroll strategy to a viewport. |
|
参数 Parameters |
|
viewport CdkVirtualScrollViewport
|
要把此策略附加到的视口。 The viewport to attach this strategy to. |
detach | |
---|---|
把这个滚动策略从当前连接的视口中拆除。 Detaches this scroll strategy from the currently attached viewport. |
onContentRendered | |
---|---|
当 DOM 中渲染的条目范围发生变化时调用。 Called when the range of items rendered in the DOM has changed. |
onContentScrolled | |
---|---|
在视口发生滚动时调用(使用 requestAnimationFrame 来防抖)。 Called when the viewport is scrolled (debounced using requestAnimationFrame). |
onDataLengthChanged | |
---|---|
当数据长度发生变化时调用。 Called when the length of the data changes. |
onRenderedOffsetChanged | |
---|---|
当渲染条目的偏移量发生变化时调用。 Called when the offset of the rendered items changed. |
scrollToIndex | |
---|---|
滚动到指定索引的偏移量。 Scroll to the offset for the given index. |
|
参数 Parameters |
|
index number
|
要滚动的元素的索引。 The index of the element to scroll to. |
behavior ScrollBehavior
|
滚动时要使用的 ScrollBehavior。 The ScrollBehavior to use when scrolling. |
CdkVirtualScrollRepeater
要被 VirtualScrollViewport 重复的条目
An item to be repeated by the VirtualScrollViewport
属性
名称 | 描述 |
---|---|
|
方法
measureRangeSize | |
---|---|
参数 Parameters |
|
range ListRange
|
|
orientation "vertical" | "horizontal"
|
|
返回值 Returns |
|
number
|
|
类型别名
ExtendedScrollToOptions
ScrollToOptions 的扩展版本,允许表达相对于视口顶部、底部、左侧、右侧、开头或结尾的滚动偏移量,而不仅仅是顶部和左侧。 请注意:top 和 bottom 属性是互斥的,left 和 right、start 和 end 属性也是如此。
An extended version of ScrollToOptions that allows expressing scroll offsets relative to the top, bottom, left, right, start, or end of the viewport rather than just the top and left. Please note: the top and bottom properties are mutually exclusive, as are the left, right, start, and end properties.
type ExtendedScrollToOptions = _XAxis & _YAxis & ScrollOptions;
CdkVirtualForOfContext
CdkVirtualForOf
渲染的条目的上下文
The context for an item rendered by CdkVirtualForOf
type CdkVirtualForOfContext = {
$implicit: T;
cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T>;
index: number;
count: number;
first: boolean;
last: boolean;
even: boolean;
odd: boolean;
};
常量
DEFAULT_SCROLL_TIME
默认情况下以毫秒为单位的时间来限制滚动事件的频度。
Time in ms to throttle the scrolling events by default.
const DEFAULT_SCROLL_TIME: 20;
DEFAULT_RESIZE_TIME
resize 事件的默认节流时间(毫秒数)。
Time in ms to throttle the resize events by default.
const DEFAULT_RESIZE_TIME: 20;
VIRTUAL_SCROLL_STRATEGY
这个注入令牌用来指定虚拟滚动策略。
The injection token used to specify the virtual scrolling strategy.
const VIRTUAL_SCROLL_STRATEGY: InjectionToken<VirtualScrollStrategy>;