change VirtualScrollStrategy interface a bit

Author: mmalerba

src/cdk/scrolling/virtual-for-of.ts

@@ -252,16 +252,16 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
   /** Apply changes to the DOM. */
   private _applyChanges(changes: IterableChanges<T>) {
     // Detach all of the views and add them into an array to preserve their original order.
-    const previousViews: EmbeddedViewRef<CdkVirtualForOfContext<T>>[] = [];
+    const previousViews: (EmbeddedViewRef<CdkVirtualForOfContext<T>> | null)[] = [];
     for (let i = 0, len = this._viewContainerRef.length; i < len; i++) {
       previousViews.unshift(
           this._viewContainerRef.detach()! as EmbeddedViewRef<CdkVirtualForOfContext<T>>);
     }
 
     // Mark the removed indices so we can recycle their views.
     changes.forEachRemovedItem(record => {
-      this._templateCache.push(previousViews[record.previousIndex!]);
-      delete previousViews[record.previousIndex!];
+      this._templateCache.push(previousViews[record.previousIndex!]!);
+      previousViews[record.previousIndex!] = null;
     });
 
     // Queue up the newly added items to be inserted, recycling views from the cache if possible.
@@ -272,15 +272,15 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
 
     // Queue up moved items to be re-inserted.
     changes.forEachMovedItem(record => {
-      insertTuples[record.currentIndex!] = {record, view: previousViews[record.previousIndex!]};
-      delete previousViews[record.previousIndex!];
+      insertTuples[record.currentIndex!] = {record, view: previousViews[record.previousIndex!]!};
+      previousViews[record.previousIndex!] = null;
     });
 
-    // We have deleted all of the views that were removed or moved from previousViews. What is left
-    // is the unchanged items that we queue up to be re-inserted.
+    // We have nulled-out all of the views that were removed or moved from previousViews. What is
+    // left is the unchanged items that we queue up to be re-inserted.
     for (let i = 0, len = previousViews.length; i < len; i++) {
       if (previousViews[i]) {
-        insertTuples[i] = {record: null, view: previousViews[i]};
+        insertTuples[i] = {record: null, view: previousViews[i]!};
       }
     }
 

src/cdk/scrolling/virtual-scroll-fixed-size.ts

@@ -6,52 +6,112 @@ import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 /** Virtual scrolling strategy for lists with items of known fixed size. */
 export class VirtualScrollFixedSizeStrategy implements VirtualScrollStrategy {
-  private _viewport: CdkVirtualScrollViewport;
-
-  constructor(public itemSize: number, public bufferSize: number) {}
+  /** The attached viewport. */
+  private _viewport: CdkVirtualScrollViewport | null = null;
+
+  /** The size of the items in the virtually scrolling list. */
+  private _itemSize: number;
+
+  /** The number of buffer items to render beyond the edge of the viewport. */
+  private _bufferSize: number;
+
+  /**
+   * @param itemSize The size of the items in the virtually scrolling list.
+   * @param bufferSize he number of buffer items to render beyond the edge of the viewport.
+   */
+  constructor(itemSize: number, bufferSize: number) {
+    this._itemSize = itemSize;
+    this._bufferSize = bufferSize;
+  }
 
-  /** Initialize the strategy and specify the viewport it will be working with. */
-  init(viewport: CdkVirtualScrollViewport) {
+  /**
+   * Attaches this scroll strategy to a viewport.
+   * @param viewport The viewport to attach this strategy to.
+   */
+  attach(viewport: CdkVirtualScrollViewport) {
     this._viewport = viewport;
-    this._viewport.totalContentSize = this._viewport.dataLength * this.itemSize;
+    this._updateTotalContentSize();
     this._updateRenderedRange();
   }
 
-  /** Re-initialize the strategy with the same viewport. */
-  reinit() {
-    if (this._viewport) {
-      this.init(this._viewport);
-    }
+  /** Detaches this scroll strategy from the currently attached viewport. */
+  detach() {
+    this._viewport = null;
   }
 
+  /**
+   * Update the item size and buffer size.
+   * @param itemSize The size of the items in the virtually scrolling list.
+   * @param bufferSize he number of buffer items to render beyond the edge of the viewport.
+   */
+  updateItemAndBufferSize(itemSize: number, bufferSize: number) {
+    this._itemSize = itemSize;
+    this._bufferSize = bufferSize;
+    this._updateTotalContentSize();
+    this._updateRenderedRange();
+  }
+
+  /** Called when the viewport is scrolled (debounced using requestAnimationFrame). */
   onContentScrolled() {
     this._updateRenderedRange();
   }
 
+  /** Called when the length of the data changes. */
   onDataLengthChanged() {
-    this._viewport.totalContentSize = this._viewport.dataLength * this.itemSize;
+    this._updateTotalContentSize();
     this._updateRenderedRange();
   }
 
+  /** Update the viewport's total content size. */
+  private _updateTotalContentSize() {
+    if (!this._viewport) {
+      return;
+    }
+
+    this._viewport.totalContentSize = this._viewport.dataLength * this._itemSize;
+  };
+
+  /** Update the viewport's rendered range. */
   private _updateRenderedRange() {
+    if (!this._viewport) {
+      return;
+    }
+
     const scrollOffset = this._viewport.measureScrollOffset();
-    const firstVisibleIndex = Math.floor(scrollOffset / this.itemSize);
+    const firstVisibleIndex = Math.floor(scrollOffset / this._itemSize);
     const range = this._expandRange(
         {start: firstVisibleIndex, end: firstVisibleIndex},
-        this.bufferSize,
-        Math.ceil(this._viewport.viewportSize / this.itemSize) + this.bufferSize);
+        this._bufferSize,
+        Math.ceil(this._viewport.viewportSize / this._itemSize) + this._bufferSize);
     this._viewport.renderedRange = range;
-    this._viewport.renderedContentOffset = this.itemSize * range.start;
+    this._viewport.renderedContentOffset = this._itemSize * range.start;
   }
 
+  /**
+   * Expand the given range by the given amount in either direction.
+   * @param range The range to expand
+   * @param expandStart The number of items to expand the start of the range by.
+   * @param expandEnd The number of items to expand the end of the range by.
+   * @return The expanded range.
+   */
   private _expandRange(range: Range, expandStart: number, expandEnd: number): Range {
+    if (!this._viewport) {
+      return {...range};
+    }
+
     const start = Math.max(0, range.start - expandStart);
     const end = Math.min(this._viewport.dataLength, range.end + expandEnd);
     return {start, end};
   }
 }
 
 
+/**
+ * Provider factory for `VirtualScrollFixedSizeStrategy` that simply extracts the already created
+ * `VirtualScrollFixedSizeStrategy` from the given directive.
+ * @param fixedSizeDir The instance of `CdkVirtualScrollFixedSize` to extract the
+ *     `VirtualScrollFixedSizeStrategy` from.
+ */
 export function _virtualScrollFixedSizeStrategyFactory(fixedSizeDir: CdkVirtualScrollFixedSize) {
   return fixedSizeDir._scrollStrategy;
 }
@@ -73,11 +133,10 @@ export class CdkVirtualScrollFixedSize implements OnChanges {
   /** The number of extra elements to render on either side of the viewport. */
   @Input() bufferSize = 5;
 
+  /** The scroll strategy used by this directive. */
   _scrollStrategy = new VirtualScrollFixedSizeStrategy(this.itemSize, this.bufferSize);
 
   ngOnChanges() {
-    this._scrollStrategy.itemSize = this.itemSize;
-    this._scrollStrategy.bufferSize = this.bufferSize;
-    this._scrollStrategy.reinit();
+    this._scrollStrategy.updateItemAndBufferSize(this.itemSize, this.bufferSize);
   }
 }

src/cdk/scrolling/virtual-scroll-strategy.ts

@@ -9,8 +9,14 @@ export const VIRTUAL_SCROLL_STRATEGY =
 
 /** A strategy that dictates which items should be rendered in the viewport. */
 export interface VirtualScrollStrategy {
-  /** Called after the viewport is initialized. */
-  init(viewport: CdkVirtualScrollViewport): void;
+  /**
+   * Attaches this scroll strategy to a viewport.
+   * @param viewport The viewport to attach this strategy to.
+   */
+  attach(viewport: CdkVirtualScrollViewport): void;
+
+  /** Detaches this scroll strategy from the currently attached viewport. */
+  detach(): void;
 
   /** Called when the viewport is scrolled (debounced using requestAnimationFrame). */
   onContentScrolled();

src/cdk/scrolling/virtual-scroll-viewport.ts

@@ -108,8 +108,6 @@ export class CdkVirtualScrollViewport implements OnInit, DoCheck, OnDestroy {
 
   private _scrollHandledStatus: 'needed' | 'pending' | 'done' = 'done';
 
-  private _scrollStrategyInited = false;
-
   constructor(public elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef,
               private _ngZone: NgZone,
               @Inject(VIRTUAL_SCROLL_STRATEGY) private _scrollStrategy: VirtualScrollStrategy) {}
@@ -125,9 +123,7 @@ export class CdkVirtualScrollViewport implements OnInit, DoCheck, OnDestroy {
       const len = data.length;
       if (len != this._dataLength) {
         this._dataLength = len;
-        if (this._scrollStrategyInited) {
-          this._scrollStrategy.onDataLengthChanged();
-        }
+        this._scrollStrategy.onDataLengthChanged();
       }
     });
   }
@@ -153,8 +149,7 @@ export class CdkVirtualScrollViewport implements OnInit, DoCheck, OnDestroy {
           this._markScrolled();
         });
       });
-      this._scrollStrategy.init(this);
-      this._scrollStrategyInited = true;
+      this._scrollStrategy.attach(this);
     });
   }
 
@@ -170,6 +165,7 @@ export class CdkVirtualScrollViewport implements OnInit, DoCheck, OnDestroy {
 
   ngOnDestroy() {
     this.disconnect();
+    this._scrollStrategy.detach();
 
     // Complete all subjects
     this._disconnectSubject.complete();