mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
feat(dialog): add the ability to close all dialogs (#1965)
Adds a `closeAll` method that closes all of the currently-open dialogs.
This commit is contained in:
committed by
tinayuangao
parent
1ea6d34e97
commit
b2999c9b69
@@ -7,6 +7,7 @@ MdDialog is a service, which opens dialogs components in the view.
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `open(component: ComponentType<T>, config: MdDialogConfig): MdDialogRef<T>` | Creates and opens a dialog matching material spec. |
|
||||
| `closeAll(): void` | Closes all of the dialogs that are currently open. |
|
||||
|
||||
### Config
|
||||
|
||||
|
||||
@@ -214,6 +214,18 @@ describe('MdDialog', () => {
|
||||
expect(overlayPane.style.marginRight).toBe('125px');
|
||||
});
|
||||
|
||||
it('should close all of the dialogs', () => {
|
||||
dialog.open(PizzaMsg);
|
||||
dialog.open(PizzaMsg);
|
||||
dialog.open(PizzaMsg);
|
||||
|
||||
expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(3);
|
||||
|
||||
dialog.closeAll();
|
||||
|
||||
expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(0);
|
||||
});
|
||||
|
||||
describe('disableClose option', () => {
|
||||
it('should prevent closing via clicks on the backdrop', () => {
|
||||
dialog.open(PizzaMsg, {
|
||||
|
||||
@@ -23,7 +23,6 @@ export {MdDialogRef} from './dialog-ref';
|
||||
|
||||
|
||||
// TODO(jelbourn): add support for opening with a TemplateRef
|
||||
// TODO(jelbourn): add `closeAll` method
|
||||
// TODO(jelbourn): dialog content directives (e.g., md-dialog-header)
|
||||
// TODO(jelbourn): animations
|
||||
|
||||
@@ -34,6 +33,9 @@ export {MdDialogRef} from './dialog-ref';
|
||||
*/
|
||||
@Injectable()
|
||||
export class MdDialog {
|
||||
/** Keeps track of the currently-open dialogs. */
|
||||
private _openDialogs: MdDialogRef<any>[] = [];
|
||||
|
||||
constructor(private _overlay: Overlay, private _injector: Injector) { }
|
||||
|
||||
/**
|
||||
@@ -46,8 +48,27 @@ export class MdDialog {
|
||||
|
||||
let overlayRef = this._createOverlay(config);
|
||||
let dialogContainer = this._attachDialogContainer(overlayRef, config);
|
||||
let dialogRef = this._attachDialogContent(component, dialogContainer, overlayRef);
|
||||
|
||||
return this._attachDialogContent(component, dialogContainer, overlayRef);
|
||||
this._openDialogs.push(dialogRef);
|
||||
dialogRef.afterClosed().subscribe(() => this._removeOpenDialog(dialogRef));
|
||||
|
||||
return dialogRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* Closes all of the currently-open dialogs.
|
||||
*/
|
||||
closeAll(): void {
|
||||
let i = this._openDialogs.length;
|
||||
|
||||
while (i--) {
|
||||
// The `_openDialogs` property isn't updated after close until the rxjs subscription
|
||||
// runs on the next microtask, in addition to modifying the array as we're going
|
||||
// through it. We loop through all of them and call close without assuming that
|
||||
// they'll be removed from the list instantaneously.
|
||||
this._openDialogs[i].close();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -141,6 +162,17 @@ export class MdDialog {
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a dialog from the array of open dialogs.
|
||||
*/
|
||||
private _removeOpenDialog(dialogRef: MdDialogRef<any>) {
|
||||
let index = this._openDialogs.indexOf(dialogRef);
|
||||
|
||||
if (index > -1) {
|
||||
this._openDialogs.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user