refactor(dialog,bottom-sheet,snack-bar): use injector to pass config to container instance (#11302)

Uses DI to pass in the config object to the various global overlay containers. Compared to the current approach, using the injector has the advantage of allowing the config to be used in the constructor and not having to null-check it everywhere.

Author: crisbeto

src/cdk-experimental/dialog/dialog-container.ts

@@ -80,9 +80,9 @@ export class CdkDialogContainer extends BasePortalOutlet {
   @HostBinding('attr.aria-label') get _ariaLabel() { return this._config.ariaLabel || null; }
 
   @HostBinding('attr.aria-describedby')
-  get _ariaDescribedBy() { return this._config ? this._config.ariaDescribedBy : null; }
+  get _ariaDescribedBy() { return this._config.ariaDescribedBy; }
 
-  @HostBinding('attr.role') get _role() { return this._config ? this._config.role : null; }
+  @HostBinding('attr.role') get _role() { return this._config.role; }
 
   @HostBinding('attr.tabindex') get _tabindex() { return -1; }
   // tslint:disable:no-host-decorator-in-concrete
@@ -102,14 +102,13 @@ export class CdkDialogContainer extends BasePortalOutlet {
   /** A subject emitting after the dialog exits the view. */
   _afterExit: Subject<void> = new Subject();
 
-  /** The dialog configuration. */
-  _config: DialogConfig;
-
   constructor(
     private _elementRef: ElementRef,
     private _focusTrapFactory: FocusTrapFactory,
     private _changeDetectorRef: ChangeDetectorRef,
-    @Optional() @Inject(DOCUMENT) private _document: any) {
+    @Optional() @Inject(DOCUMENT) private _document: any,
+    /** The dialog configuration. */
+    public _config: DialogConfig) {
     super();
   }
 

src/cdk-experimental/dialog/dialog.ts

@@ -178,8 +178,12 @@ export class Dialog {
    */
   protected _attachDialogContainer(overlay: OverlayRef, config: DialogConfig): CdkDialogContainer {
     const container = config.containerComponent || this.injector.get(DIALOG_CONTAINER);
-    let containerPortal = new ComponentPortal(container, config.viewContainerRef);
-    let containerRef: ComponentRef<CdkDialogContainer> = overlay.attach(containerPortal);
+    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+    const injector = new PortalInjector(userInjector || this.injector, new WeakMap([
+      [DialogConfig, config]
+    ]));
+    const containerPortal = new ComponentPortal(container, config.viewContainerRef, injector);
+    const containerRef: ComponentRef<CdkDialogContainer> = overlay.attach(containerPortal);
     containerRef.instance._config = config;
 
     return containerRef.instance;
@@ -259,12 +263,11 @@ export class Dialog {
       dialogContainer: CdkDialogContainer): PortalInjector {
 
     const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
-    const injectionTokens = new WeakMap();
-
-    injectionTokens
-      .set(this.injector.get(DIALOG_REF), dialogRef)
-      .set(this.injector.get(DIALOG_CONTAINER), dialogContainer)
-      .set(DIALOG_DATA, config.data);
+    const injectionTokens = new WeakMap<any, any>([
+      [this.injector.get(DIALOG_REF), dialogRef],
+      [this.injector.get(DIALOG_CONTAINER), dialogContainer],
+      [DIALOG_DATA, config.data]
+    ]);
 
     if (!userInjector || !userInjector.get(Directionality, null)) {
       injectionTokens.set(Directionality, {

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -22,7 +22,6 @@ import {isElementScrolledOutsideView, isElementClippedByScrolling} from './scrol
 import {coerceCssPixelValue} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
 
-
 // TODO: refactor clipping detection into a separate thing (part of scrolling module)
 // TODO: attribute selector to specify the transform-origin inside the overlay content
 // TODO: flexible position + centering doesn't work on IE11 (works on Edge).

src/lib/bottom-sheet/bottom-sheet-container.ts

@@ -70,9 +70,6 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
   /** Emits whenever the state of the animation changes. */
   _animationStateChanged = new EventEmitter<AnimationEvent>();
 
-  /** The bottom sheet configuration. */
-  bottomSheetConfig: MatBottomSheetConfig;
-
   /** The class that traps and manages focus within the bottom sheet. */
   private _focusTrap: FocusTrap;
 
@@ -90,7 +87,9 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
     private _changeDetectorRef: ChangeDetectorRef,
     private _focusTrapFactory: FocusTrapFactory,
     breakpointObserver: BreakpointObserver,
-    @Optional() @Inject(DOCUMENT) document: any) {
+    @Optional() @Inject(DOCUMENT) document: any,
+    /** The bottom sheet configuration. */
+    public bottomSheetConfig: MatBottomSheetConfig) {
     super();
 
     this._document = document;

src/lib/bottom-sheet/bottom-sheet.ts

@@ -103,9 +103,15 @@ export class MatBottomSheet {
    */
   private _attachContainer(overlayRef: OverlayRef,
                            config: MatBottomSheetConfig): MatBottomSheetContainer {
-    const containerPortal = new ComponentPortal(MatBottomSheetContainer, config.viewContainerRef);
+
+    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+    const injector = new PortalInjector(userInjector || this._injector, new WeakMap([
+      [MatBottomSheetConfig, config]
+    ]));
+
+    const containerPortal =
+        new ComponentPortal(MatBottomSheetContainer, config.viewContainerRef, injector);
     const containerRef: ComponentRef<MatBottomSheetContainer> = overlayRef.attach(containerPortal);
-    containerRef.instance.bottomSheetConfig = config;
     return containerRef.instance;
   }
 
@@ -141,10 +147,10 @@ export class MatBottomSheet {
                              bottomSheetRef: MatBottomSheetRef<T>): PortalInjector {
 
     const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
-    const injectionTokens = new WeakMap();
-
-    injectionTokens.set(MatBottomSheetRef, bottomSheetRef);
-    injectionTokens.set(MAT_BOTTOM_SHEET_DATA, config.data);
+    const injectionTokens = new WeakMap<any, any>([
+      [MatBottomSheetRef, bottomSheetRef],
+      [MAT_BOTTOM_SHEET_DATA, config.data]
+    ]);
 
     if (!userInjector || !userInjector.get(Directionality, null)) {
       injectionTokens.set(Directionality, {

src/lib/dialog/dialog-container.ts

@@ -60,10 +60,10 @@ export function throwMatDialogContentAlreadyAttachedError() {
     'class': 'mat-dialog-container',
     'tabindex': '-1',
     '[attr.id]': '_id',
-    '[attr.role]': '_config?.role',
-    '[attr.aria-labelledby]': '_config?.ariaLabel ? null : _ariaLabelledBy',
-    '[attr.aria-label]': '_config?.ariaLabel',
-    '[attr.aria-describedby]': '_config?.ariaDescribedBy || null',
+    '[attr.role]': '_config.role',
+    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
+    '[attr.aria-label]': '_config.ariaLabel',
+    '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
     '[@slideDialog]': '_state',
     '(@slideDialog.start)': '_onAnimationStart($event)',
     '(@slideDialog.done)': '_onAnimationDone($event)',
@@ -79,9 +79,6 @@ export class MatDialogContainer extends BasePortalOutlet {
   /** Element that was focused before the dialog was opened. Save this to restore upon close. */
   private _elementFocusedBeforeDialogWasOpened: HTMLElement | null = null;
 
-  /** The dialog configuration. */
-  _config: MatDialogConfig;
-
   /** State of the dialog animation. */
   _state: 'void' | 'enter' | 'exit' = 'enter';
 
@@ -98,7 +95,9 @@ export class MatDialogContainer extends BasePortalOutlet {
     private _elementRef: ElementRef,
     private _focusTrapFactory: FocusTrapFactory,
     private _changeDetectorRef: ChangeDetectorRef,
-    @Optional() @Inject(DOCUMENT) private _document: any) {
+    @Optional() @Inject(DOCUMENT) private _document: any,
+    /** The dialog configuration. */
+    public _config: MatDialogConfig) {
 
     super();
   }

src/lib/dialog/dialog.ts

@@ -17,7 +17,6 @@ import {
 import {ComponentPortal, ComponentType, PortalInjector, TemplatePortal} from '@angular/cdk/portal';
 import {Location} from '@angular/common';
 import {
-  ComponentRef,
   Inject,
   inject,
   Injectable,
@@ -210,9 +209,13 @@ export class MatDialog {
    * @returns A promise resolving to a ComponentRef for the attached container.
    */
   private _attachDialogContainer(overlay: OverlayRef, config: MatDialogConfig): MatDialogContainer {
-    let containerPortal = new ComponentPortal(MatDialogContainer, config.viewContainerRef);
-    let containerRef: ComponentRef<MatDialogContainer> = overlay.attach(containerPortal);
-    containerRef.instance._config = config;
+    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+    const injector = new PortalInjector(userInjector || this._injector, new WeakMap([
+      [MatDialogConfig, config]
+    ]));
+    const containerPortal =
+        new ComponentPortal(MatDialogContainer, config.viewContainerRef, injector);
+    const containerRef = overlay.attach<MatDialogContainer>(containerPortal);
 
     return containerRef.instance;
   }
@@ -278,16 +281,16 @@ export class MatDialog {
       dialogContainer: MatDialogContainer): PortalInjector {
 
     const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
-    const injectionTokens = new WeakMap();
 
     // The MatDialogContainer is injected in the portal as the MatDialogContainer and the dialog's
     // content are created out of the same ViewContainerRef and as such, are siblings for injector
     // purposes. To allow the hierarchy that is expected, the MatDialogContainer is explicitly
     // added to the injection tokens.
-    injectionTokens
-      .set(MatDialogContainer, dialogContainer)
-      .set(MAT_DIALOG_DATA, config.data)
-      .set(MatDialogRef, dialogRef);
+    const injectionTokens = new WeakMap<any, any>([
+      [MatDialogContainer, dialogContainer],
+      [MAT_DIALOG_DATA, config.data],
+      [MatDialogRef, dialogRef]
+    ]);
 
     if (!userInjector || !userInjector.get(Directionality, null)) {
       injectionTokens.set(Directionality, {

src/lib/snack-bar/snack-bar-container.ts

@@ -66,13 +66,13 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
   /** The state of the snack bar animations. */
   _animationState = 'void';
 
-  /** The snack bar configuration. */
-  snackBarConfig: MatSnackBarConfig;
-
   constructor(
     private _ngZone: NgZone,
     private _elementRef: ElementRef,
-    private _changeDetectorRef: ChangeDetectorRef) {
+    private _changeDetectorRef: ChangeDetectorRef,
+    /** The snack bar configuration. */
+    public snackBarConfig: MatSnackBarConfig) {
+
     super();
   }
 

src/lib/snack-bar/snack-bar.ts

@@ -130,7 +130,14 @@ export class MatSnackBar {
    */
   private _attachSnackBarContainer(overlayRef: OverlayRef,
                                    config: MatSnackBarConfig): MatSnackBarContainer {
-    const containerPortal = new ComponentPortal(MatSnackBarContainer, config.viewContainerRef);
+
+    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+    const injector = new PortalInjector(userInjector || this._injector, new WeakMap([
+      [MatSnackBarConfig, config]
+    ]));
+
+    const containerPortal =
+        new ComponentPortal(MatSnackBarContainer, config.viewContainerRef, injector);
     const containerRef: ComponentRef<MatSnackBarContainer> = overlayRef.attach(containerPortal);
     containerRef.instance.snackBarConfig = config;
     return containerRef.instance;
@@ -257,11 +264,10 @@ export class MatSnackBar {
       snackBarRef: MatSnackBarRef<T>): PortalInjector {
 
     const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
-    const injectionTokens = new WeakMap();
-
-    injectionTokens.set(MatSnackBarRef, snackBarRef);
-    injectionTokens.set(MAT_SNACK_BAR_DATA, config.data);
 
-    return new PortalInjector(userInjector || this._injector, injectionTokens);
+    return new PortalInjector(userInjector || this._injector, new WeakMap<any, any>([
+      [MatSnackBarRef, snackBarRef],
+      [MAT_SNACK_BAR_DATA, config.data]
+    ]));
   }
 }