fix(dialog): close all dialogs on popstate/hashchange

Closes all of the open dialogs when the user goes forwards/backwards in history.

Fixes #2601.

Author: crisbeto

src/lib/dialog/dialog.spec.ts

@@ -15,6 +15,8 @@ import {NgModule,
   Injector,
   Inject,
 } from '@angular/core';
+import {Location} from '@angular/common';
+import {SpyLocation} from '@angular/common/testing';
 import {MdDialogModule} from './index';
 import {MdDialog} from './dialog';
 import {OverlayContainer} from '../core';
@@ -29,6 +31,7 @@ describe('MdDialog', () => {
 
   let testViewContainerRef: ViewContainerRef;
   let viewContainerFixture: ComponentFixture<ComponentWithChildViewContainer>;
+  let mockLocation: SpyLocation;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -37,15 +40,17 @@ describe('MdDialog', () => {
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');
           return {getContainerElement: () => overlayContainerElement};
-        }}
+        }},
+        {provide: Location, useClass: SpyLocation}
       ],
     });
 
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([MdDialog], (d: MdDialog) => {
+  beforeEach(inject([MdDialog, Location], (d: MdDialog, l: Location) => {
     dialog = d;
+    mockLocation = l as SpyLocation;
   }));
 
   beforeEach(() => {
@@ -274,6 +279,28 @@ describe('MdDialog', () => {
     expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(0);
   });
 
+  it('should close all open dialogs when the user goes forwards/backwards in history', () => {
+    dialog.open(PizzaMsg);
+    dialog.open(PizzaMsg);
+
+    expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(2);
+
+    mockLocation.simulateUrlPop('');
+
+    expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(0);
+  });
+
+  it('should close all open dialogs when the location hash changes', () => {
+    dialog.open(PizzaMsg);
+    dialog.open(PizzaMsg);
+
+    expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(2);
+
+    mockLocation.simulateHashChange('');
+
+    expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(0);
+  });
+
   describe('passing in data', () => {
     it('should be able to pass in data', () => {
       let config = {
@@ -433,7 +460,8 @@ describe('MdDialog with a parent MdDialog', () => {
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');
           return {getContainerElement: () => overlayContainerElement};
-        }}
+        }},
+        {provide: Location, useClass: SpyLocation}
       ],
     });
 

src/lib/dialog/dialog.ts

@@ -1,4 +1,5 @@
 import {Injector, ComponentRef, Injectable, Optional, SkipSelf, TemplateRef} from '@angular/core';
+import {Location} from '@angular/common';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {Overlay, OverlayRef, ComponentType, OverlayState, ComponentPortal} from '../core';
@@ -49,7 +50,16 @@ export class MdDialog {
   constructor(
       private _overlay: Overlay,
       private _injector: Injector,
-      @Optional() @SkipSelf() private _parentDialog: MdDialog) { }
+      private _location: Location,
+      @Optional() @SkipSelf() private _parentDialog: MdDialog) {
+
+    // Close all of the dialogs when the user goes forwards/backwards in history or when the
+    // location hash changes. Note that this usually doesn't include clicking on links (unless
+    // the user is using the `HashLocationStrategy`).
+    if (!_parentDialog) {
+      _location.subscribe(() => this.closeAll());
+    }
+  }
 
   /**
    * Opens a modal dialog containing the given component.
@@ -135,7 +145,7 @@ export class MdDialog {
       config?: MdDialogConfig): MdDialogRef<T> {
     // Create a reference to the dialog we're creating in order to give the user a handle
     // to modify and close it.
-    let dialogRef = <MdDialogRef<T>> new MdDialogRef(overlayRef, config);
+    let dialogRef = new MdDialogRef(overlayRef, config) as MdDialogRef<T>;
 
     if (!config.disableClose) {
       // When the dialog backdrop is clicked, we want to close it.

src/lib/dialog/index.ts

@@ -1,4 +1,5 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
+import {CommonModule} from '@angular/common';
 import {
   OverlayModule,
   PortalModule,
@@ -17,6 +18,7 @@ import {
 
 @NgModule({
   imports: [
+    CommonModule,
     OverlayModule,
     PortalModule,
     A11yModule,