fix(theme): fix an issue when scrollbar didn't reset after a route ch…

…ange (#91)

src/framework/theme/components/layout/layout.component.ts

@@ -5,23 +5,15 @@
  */
 
 import {
-  AfterViewInit,
-  Component,
-  ComponentFactoryResolver,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  Input,
-  OnDestroy,
-  Renderer2,
-  ViewChild,
-  ViewContainerRef,
+  AfterViewInit, Component, ComponentFactoryResolver, ElementRef, HostBinding, HostListener, Input, OnDestroy,
+  Renderer2, ViewChild, ViewContainerRef, OnInit,
 } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Router, NavigationEnd } from '@angular/router';
 import { Subject } from 'rxjs/Subject';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import 'rxjs/add/operator/toPromise';
 import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/takeWhile';
 
 import { convertToBoolProperty } from '../helpers';
 import { NbThemeService } from '../../services/theme.service';
@@ -222,7 +214,7 @@ export class NbLayoutFooterComponent {
   styleUrls: ['./layout.component.scss'],
   template: `
     <ng-template #layoutTopDynamicArea></ng-template>
-    <div class="scrollable-container">
+    <div class="scrollable-container" #scrollableContainer>
       <div class="layout">
         <ng-content select="nb-layout-header"></ng-content>
         <div class="layout-container">
@@ -238,9 +230,10 @@ export class NbLayoutFooterComponent {
     </div>
   `,
 })
-export class NbLayoutComponent implements OnDestroy, AfterViewInit {
+export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
 
   centerValue: boolean = false;
+
   @HostBinding('class.window-mode') windowModeValue: boolean = false;
   @HostBinding('class.with-scroll') withScrollValue: boolean = false;
 
@@ -286,57 +279,66 @@ export class NbLayoutComponent implements OnDestroy, AfterViewInit {
   }
 
   @ViewChild('layoutTopDynamicArea', { read: ViewContainerRef }) veryTopRef: ViewContainerRef;
+  @ViewChild('scrollableContainer', { read: ElementRef }) scrollableContainerRef: ElementRef;
 
   protected afterViewInit$ = new BehaviorSubject(null);
 
-  protected appendClassSubscription: Subscription;
-  protected removeClassSubscription: Subscription;
-  protected themeSubscription: Subscription;
-  protected appendSubscription: Subscription;
-  protected clearSubscription: Subscription;
-
-  constructor(protected themeService: NbThemeService,
-              protected spinnerService: NbSpinnerService,
-              protected componentFactoryResolver: ComponentFactoryResolver,
-              protected elementRef: ElementRef,
-              protected renderer: Renderer2) {
-
-    this.themeSubscription = this.themeService.onThemeChange().subscribe((theme) => {
-
-      const body = document.getElementsByTagName('body')[0];
-      if (theme.previous) {
-        this.renderer.removeClass(body, `nb-theme-${theme.previous}`);
-      }
-      this.renderer.addClass(body, `nb-theme-${theme.name}`);
-    });
+  private alive: boolean = true;
+
+  constructor(
+    protected themeService: NbThemeService,
+    protected spinnerService: NbSpinnerService,
+    protected componentFactoryResolver: ComponentFactoryResolver,
+    protected elementRef: ElementRef,
+    protected renderer: Renderer2,
+    protected router: Router,
+  ) {
+
+    this.themeService.onThemeChange()
+      .takeWhile(() => this.alive)
+      .subscribe((theme) => {
+        const body = document.getElementsByTagName('body')[0];
+        if (theme.previous) {
+          this.renderer.removeClass(body, `nb-theme-${theme.previous}`);
+        }
+        this.renderer.addClass(body, `nb-theme-${theme.name}`);
+      });
 
-    this.appendClassSubscription = this.themeService.onAppendLayoutClass().subscribe((className) => {
-      this.renderer.addClass(this.elementRef.nativeElement, className);
-    });
+    this.themeService.onAppendLayoutClass()
+      .takeWhile(() => this.alive)
+      .subscribe((className) => {
+        this.renderer.addClass(this.elementRef.nativeElement, className);
+      });
 
-    this.removeClassSubscription = this.themeService.onRemoveLayoutClass().subscribe((className) => {
-      this.renderer.removeClass(this.elementRef.nativeElement, className);
-    });
+    this.themeService.onRemoveLayoutClass()
+      .takeWhile(() => this.alive)
+      .subscribe((className) => {
+        this.renderer.removeClass(this.elementRef.nativeElement, className);
+      });
 
     this.spinnerService.registerLoader(new Promise((resolve, reject) => {
-      this.afterViewInit$.subscribe((_) => resolve());
+      this.afterViewInit$
+        .takeWhile(() => this.alive)
+        .subscribe((_) => resolve());
     }));
     this.spinnerService.load();
 
     // trigger first time so that after the change we have the initial value
     this.themeService.changeWindowWidth(window.innerWidth);
   }
 
-  ngAfterViewInit(): void {
-    this.appendSubscription = this.themeService.onAppendToTop()
+  ngAfterViewInit() {
+    this.themeService.onAppendToTop()
+      .takeWhile(() => this.alive)
       .subscribe((data: { component: any, listener: Subject<any> }) => {
         const componentFactory = this.componentFactoryResolver.resolveComponentFactory(data.component);
         const componentRef = this.veryTopRef.createComponent(componentFactory);
         data.listener.next(componentRef);
         data.listener.complete();
       });
 
-    this.clearSubscription = this.themeService.onClearLayoutTop()
+    this.themeService.onClearLayoutTop()
+      .takeWhile(() => this.alive)
       .subscribe((data: { listener: Subject<any> }) => {
         this.veryTopRef.clear();
         data.listener.next(true);
@@ -345,17 +347,26 @@ export class NbLayoutComponent implements OnDestroy, AfterViewInit {
     this.afterViewInit$.next(true);
   }
 
-  ngOnDestroy(): void {
+  ngOnInit() {
+    this.initScrollTop();
+  }
+
+  ngOnDestroy() {
     this.themeService.clearLayoutTop();
-    this.themeSubscription.unsubscribe();
-    this.appendClassSubscription.unsubscribe();
-    this.removeClassSubscription.unsubscribe();
-    this.appendSubscription.unsubscribe();
-    this.clearSubscription.unsubscribe();
+    this.alive = false;
   }
 
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.themeService.changeWindowWidth(event.target.innerWidth);
   }
+
+  private initScrollTop() {
+    this.router.events
+      .filter(event => event instanceof NavigationEnd)
+      .takeWhile(() => this.alive)
+      .subscribe(() => {
+        this.scrollableContainerRef.nativeElement.scrollTo && this.scrollableContainerRef.nativeElement.scrollTo(0, 0);
+      });
+  }
 }