Refactor rxjs bits

Author: jelbourn

src/app/pages/component-viewer/component-viewer.ts

@@ -1,11 +1,13 @@
 import {Component, OnInit, NgModule, ElementRef, ViewEncapsulation, ViewChild} from '@angular/core';
-import {ActivatedRoute, Router, RouterModule} from '@angular/router';
+import {ActivatedRoute, Params, Router, RouterModule} from '@angular/router';
 import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {MatTabsModule} from '@angular/material';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {CommonModule} from '@angular/common';
 import {TableOfContentsModule} from '../../shared/table-of-contents/table-of-contents.module';
+import {Observable} from 'rxjs/Observable';
+
 
 @Component({
   selector: 'app-component-viewer',
@@ -22,21 +24,23 @@ export class ComponentViewer {
               private router: Router,
               public _componentPageTitle: ComponentPageTitle,
               public docItems: DocumentationItems) {
-    this._route.params.subscribe(params => {
-      this.componentDocItem = docItems.getItemById(
-          params['id'],
-          this._route.parent.snapshot.params['section']);
-
-      if (this.componentDocItem) {
-        this._componentPageTitle.title = `${this.componentDocItem.name}`;
-        this.componentDocItem.examples.length ?
-          this.sections.add('examples') :
-          this.sections.delete('examples');
+    // Listen to changes on the current route for the doc id (e.g. button/checkbox) and the
+    // parent route for the section (material/cdk).
+    Observable.combineLatest(_route.params, _route.parent.params)
+        .map((p: [Params, Params]) => ({id: p[0]['id'], section: p[1]['section']}))
+        .map(p => docItems.getItemById(p.id, p.section))
+        .subscribe(d => {
+          this.componentDocItem = d;
+          if (this.componentDocItem) {
+            this._componentPageTitle.title = `${this.componentDocItem.name}`;
+            this.componentDocItem.examples.length ?
+              this.sections.add('examples') :
+              this.sections.delete('examples');
 
-      } else {
-        this.router.navigate(['/components']);
-      }
-    });
+          } else {
+            this.router.navigate(['/components']);
+          }
+        });
   }
 }
 

src/app/shared/table-of-contents/table-of-contents.ts

@@ -1,10 +1,11 @@
-import {Component, Input, Inject, ElementRef, OnInit} from '@angular/core';
+import {Component, ElementRef, Inject, Input, OnInit} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
-import {Router, ActivatedRoute, NavigationEnd} from '@angular/router';
-import {Observable} from 'rxjs/Observable';
-import {Subscription} from 'rxjs/Subscription';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import 'rxjs/add/observable/fromEvent';
 import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/takeUntil';
+import {Observable} from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
 
 interface Link {
   /* id of the section*/
@@ -36,17 +37,15 @@ export class TableOfContents implements OnInit {
 
   _rootUrl: string;
   private _scrollContainer: any;
-  private _scrollSubscription: Subscription;
-  private _routeSubscription: Subscription;
-  private _fragmentSubscription: Subscription;
+  private _destroyed = new Subject();
   private _urlFragment = '';
 
   constructor(private _router: Router,
               private _route: ActivatedRoute,
               private _element: ElementRef,
               @Inject(DOCUMENT) private _document: Document) {
 
-    this._routeSubscription = this._router.events.subscribe((event) => {
+    this._router.events.takeUntil(this._destroyed).subscribe((event) => {
       if (event instanceof NavigationEnd) {
         const rootUrl = _router.url.split('#')[0];
         if (rootUrl !== this._rootUrl) {
@@ -56,7 +55,7 @@ export class TableOfContents implements OnInit {
       }
     });
 
-    this._fragmentSubscription = this._route.fragment.subscribe(fragment => {
+    this._route.fragment.takeUntil(this._destroyed).subscribe(fragment => {
       this._urlFragment = fragment;
 
       const target = document.getElementById(this._urlFragment);
@@ -73,17 +72,15 @@ export class TableOfContents implements OnInit {
       this._scrollContainer = this.container ?
         this._document.querySelectorAll(this.container)[0] : window;
 
-      this._scrollSubscription = Observable
-        .fromEvent(this._scrollContainer, 'scroll')
+      Observable.fromEvent(this._scrollContainer, 'scroll')
+        .takeUntil(this._destroyed)
         .debounceTime(10)
         .subscribe(() => this.onScroll());
     });
   }
 
   ngOnDestroy(): void {
-    this._routeSubscription && this._routeSubscription.unsubscribe();
-    this._scrollSubscription && this._scrollSubscription.unsubscribe();
-    this._fragmentSubscription && this._fragmentSubscription.unsubscribe();
+    this._destroyed.next();
   }
 
   updateScrollPosition(): void {