fix(scroll): memory leak

Author: manucorporat

src/components/scroll/scroll.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
 
-import { isTrueProperty } from '../../util/util';
+import { isTrueProperty, assert } from '../../util/util';
 
 /**
  * @name Scroll
@@ -22,7 +22,7 @@ import { isTrueProperty } from '../../util/util';
 @Component({
   selector: 'ion-scroll',
   template:
-    '<div class="scroll-content">' +
+    '<div class="scroll-content" #scrollContent>' +
       '<div class="scroll-zoom-wrapper">' +
         '<ng-content></ng-content>' +
       '</div>' +
@@ -35,6 +35,7 @@ import { isTrueProperty } from '../../util/util';
   encapsulation: ViewEncapsulation.None,
 })
 export class Scroll {
+
   _scrollX: boolean = false;
   _scrollY: boolean = false;
   _zoom: boolean = false;
@@ -92,19 +93,11 @@ export class Scroll {
    * @hidden
    */
   zoomDuration: number = 250;
-  /**
-   * @hidden
-   */
-  scrollElement: HTMLElement;
 
-  constructor(private _elementRef: ElementRef) {}
+  /** @internal */
+  @ViewChild('scrollContent', { read: ElementRef }) _scrollContent: ElementRef;
 
-  /**
-   * @hidden
-   */
-  ngOnInit() {
-    this.scrollElement = this._elementRef.nativeElement.children[0];
-  }
+  constructor(private _elementRef: ElementRef) { }
 
   /**
    * @hidden
@@ -114,12 +107,13 @@ export class Scroll {
    * undefined if the scroll element doesn't exist.
    */
   addScrollEventListener(handler: any) {
-    if (!this.scrollElement) { return; }
+    assert(this._scrollContent, 'scroll element is missing');
 
-    this.scrollElement.addEventListener('scroll', handler);
+    const ele = this._scrollContent.nativeElement;
+    ele.addEventListener('scroll', handler);
 
     return () => {
-      this.scrollElement.removeEventListener('scroll', handler);
+      ele.removeEventListener('scroll', handler);
     };
   }
 

src/components/scroll/test/basic/main.html

@@ -11,17 +11,17 @@
 
   <h2>Horizontal</h2>
   <ion-scroll scrollX="true" style="height: 200px">
-    <div style="height: 200px; width: 2500px; background: url('eight_horns.png') repeat"></div>
+    <div style="height: 200px; width: 2500px;" class="pattern1"></div>
   </ion-scroll>
 
   <h2>Vertical</h2>
   <ion-scroll scrollY="true" style="width: 200px; height: 500px">
-    <div style="height: 2500px; width: 200px; background: url('eight_horns.png') repeat"></div>
+    <div style="height: 2500px; width: 200px;" class="pattern2"></div>
   </ion-scroll>
 
   <h2>Both</h2>
-  <ion-scroll scrollX="true" scrollY="true" style="width: 100%; height: 500px">
-    <div style="height: 2500px; width: 2500px; background: url('eight_horns.png') repeat"></div>
+  <ion-scroll scrollX scrollY style="width: 100%; height: 500px">
+    <div style="height: 2500px; width: 2500px;" class="pattern3"></div>
   </ion-scroll>
 
 </ion-content>
@@ -38,4 +38,29 @@ <h2>Both</h2>
     background-color: rgba(0,0,0,0.4);
     z-index: 5;
   }
+
+  .pattern1 {
+    background:
+    radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
+    radial-gradient(at 100% 100%,      rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
+    #8a3;
+    background-size: 20px 20px;
+  }
+
+  .pattern2 {
+    background:
+linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,
+linear-gradient(63deg, transparent 74%, #999 78%),
+linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
+#444;
+background-size: 16px 48px;
+  }
+
+  .pattern3 {
+    background:
+linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
+linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
+background-color:#708090;
+background-size: 64px 128px
+  }
 </style>