refactor(material/dialog): use embedded injector to provide ref to template dialogs

Previously we had to walk the DOM in order to figure out which dialog ref belonged to a specific template dialog. We no longer need to do that if we provide an injector to the template portal.

Author: crisbeto

src/material-experimental/mdc-dialog/dialog-content-directives.ts

@@ -9,6 +9,7 @@
 import {
   Directive,
   ElementRef,
+  Inject,
   Input,
   OnChanges,
   OnInit,
@@ -17,7 +18,6 @@ import {
 } from '@angular/core';
 import {_closeDialogVia} from '@angular/material/dialog';
 
-import {MatDialog} from './dialog';
 import {MatDialogRef} from './dialog-ref';
 
 /** Counter used to generate unique IDs for dialog elements. */
@@ -35,7 +35,7 @@ let dialogElementUid = 0;
     '[attr.type]': 'type',
   },
 })
-export class MatDialogClose implements OnInit, OnChanges {
+export class MatDialogClose implements OnChanges {
   /** Screenreader label for the button. */
   @Input('aria-label') ariaLabel: string;
 
@@ -51,21 +51,14 @@ export class MatDialogClose implements OnInit, OnChanges {
     // The dialog title directive is always used in combination with a `MatDialogRef`.
     // tslint:disable-next-line: lightweight-tokens
     @Optional() public dialogRef: MatDialogRef<any>,
-    private _elementRef: ElementRef<HTMLElement>,
-    private _dialog: MatDialog,
+    /**
+     * @deprecated `_elementRef` and `_dialog` parameters to be removed.
+     * @breaking-change 15.0.0
+     */
+    @Inject(ElementRef) _elementRef?: any,
+    @Inject(ElementRef) _dialog?: any,
   ) {}
 
-  ngOnInit() {
-    if (!this.dialogRef) {
-      // When this directive is included in a dialog via TemplateRef (rather than being
-      // in a Component), the DialogRef isn't available via injection because embedded
-      // views cannot be given a custom injector. Instead, we look up the DialogRef by
-      // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
-      // be resolved at constructor time.
-      this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;
-    }
-  }
-
   ngOnChanges(changes: SimpleChanges) {
     const proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult'];
 
@@ -105,15 +98,15 @@ export class MatDialogTitle implements OnInit {
     // The dialog title directive is always used in combination with a `MatDialogRef`.
     // tslint:disable-next-line: lightweight-tokens
     @Optional() private _dialogRef: MatDialogRef<any>,
-    private _elementRef: ElementRef<HTMLElement>,
-    private _dialog: MatDialog,
+    /**
+     * @deprecated `_elementRef` and `_dialog` parameters to be removed.
+     * @breaking-change 15.0.0
+     */
+    @Inject(ElementRef) _elementRef?: any,
+    @Inject(ElementRef) _dialog?: any,
   ) {}
 
   ngOnInit() {
-    if (!this._dialogRef) {
-      this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;
-    }
-
     if (this._dialogRef) {
       Promise.resolve().then(() => {
         const container = this._dialogRef._containerInstance;
@@ -153,18 +146,3 @@ export class MatDialogActions {
    */
   @Input() align?: 'start' | 'center' | 'end' = 'start';
 }
-
-/**
- * Finds the closest MatDialogRef to an element by looking at the DOM.
- * @param element Element relative to which to look for a dialog.
- * @param openDialogs References to the currently-open dialogs.
- */
-function getClosestDialog(element: ElementRef<HTMLElement>, openDialogs: MatDialogRef<any>[]) {
-  let parent: HTMLElement | null = element.nativeElement.parentElement;
-
-  while (parent && !parent.classList.contains('mat-mdc-dialog-container')) {
-    parent = parent.parentElement;
-  }
-
-  return parent ? openDialogs.find(dialog => dialog.id === parent!.id) : null;
-}

src/material/dialog/dialog-content-directives.ts

@@ -14,8 +14,8 @@ import {
   Optional,
   SimpleChanges,
   ElementRef,
+  Inject,
 } from '@angular/core';
-import {MatDialog} from './dialog';
 import {_closeDialogVia, MatDialogRef} from './dialog-ref';
 
 /** Counter used to generate unique IDs for dialog elements. */
@@ -33,7 +33,7 @@ let dialogElementUid = 0;
     '[attr.type]': 'type',
   },
 })
-export class MatDialogClose implements OnInit, OnChanges {
+export class MatDialogClose implements OnChanges {
   /** Screenreader label for the button. */
   @Input('aria-label') ariaLabel: string;
 
@@ -54,21 +54,14 @@ export class MatDialogClose implements OnInit, OnChanges {
     // The dialog title directive is always used in combination with a `MatDialogRef`.
     // tslint:disable-next-line: lightweight-tokens
     @Optional() public dialogRef: MatDialogRef<any>,
-    private _elementRef: ElementRef<HTMLElement>,
-    private _dialog: MatDialog,
+    /**
+     * @deprecated `_elementRef` and `_dialog` parameters to be removed.
+     * @breaking-change 15.0.0
+     */
+    @Inject(ElementRef) _elementRef?: any,
+    @Inject(ElementRef) _dialog?: any,
   ) {}
 
-  ngOnInit() {
-    if (!this.dialogRef) {
-      // When this directive is included in a dialog via TemplateRef (rather than being
-      // in a Component), the DialogRef isn't available via injection because embedded
-      // views cannot be given a custom injector. Instead, we look up the DialogRef by
-      // ID. This must occur in `onInit`, as the ID binding for the dialog container won't
-      // be resolved at constructor time.
-      this.dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;
-    }
-  }
-
   ngOnChanges(changes: SimpleChanges) {
     const proxiedChange = changes['_matDialogClose'] || changes['_matDialogCloseResult'];
 
@@ -109,15 +102,15 @@ export class MatDialogTitle implements OnInit {
     // The dialog title directive is always used in combination with a `MatDialogRef`.
     // tslint:disable-next-line: lightweight-tokens
     @Optional() private _dialogRef: MatDialogRef<any>,
-    private _elementRef: ElementRef<HTMLElement>,
-    private _dialog: MatDialog,
+    /**
+     * @deprecated `_elementRef` and `_dialog` parameters to be removed.
+     * @breaking-change 15.0.0
+     */
+    @Inject(ElementRef) _elementRef?: any,
+    @Inject(ElementRef) _dialog?: any,
   ) {}
 
   ngOnInit() {
-    if (!this._dialogRef) {
-      this._dialogRef = getClosestDialog(this._elementRef, this._dialog.openDialogs)!;
-    }
-
     if (this._dialogRef) {
       Promise.resolve().then(() => {
         const container = this._dialogRef._containerInstance;
@@ -157,18 +150,3 @@ export class MatDialogActions {
    */
   @Input() align?: 'start' | 'center' | 'end' = 'start';
 }
-
-/**
- * Finds the closest MatDialogRef to an element by looking at the DOM.
- * @param element Element relative to which to look for a dialog.
- * @param openDialogs References to the currently-open dialogs.
- */
-function getClosestDialog(element: ElementRef<HTMLElement>, openDialogs: MatDialogRef<any>[]) {
-  let parent: HTMLElement | null = element.nativeElement.parentElement;
-
-  while (parent && !parent.classList.contains('mat-dialog-container')) {
-    parent = parent.parentElement;
-  }
-
-  return parent ? openDialogs.find(dialog => dialog.id === parent!.id) : null;
-}

src/material/dialog/dialog.ts

@@ -292,16 +292,21 @@ export abstract class _MatDialogBase<C extends _MatDialogContainerBase> implemen
     // Create a reference to the dialog we're creating in order to give the user a handle
     // to modify and close it.
     const dialogRef = new this._dialogRefConstructor(overlayRef, dialogContainer, config.id);
+    const injector = this._createInjector<T>(config, dialogRef, dialogContainer);
 
     if (componentOrTemplateRef instanceof TemplateRef) {
       dialogContainer.attachTemplatePortal(
-        new TemplatePortal<T>(componentOrTemplateRef, null!, <any>{
-          $implicit: config.data,
-          dialogRef,
-        }),
+        new TemplatePortal<T>(
+          componentOrTemplateRef,
+          null!,
+          <any>{
+            $implicit: config.data,
+            dialogRef,
+          },
+          injector,
+        ),
       );
     } else {
-      const injector = this._createInjector<T>(config, dialogRef, dialogContainer);
       const contentRef = dialogContainer.attachComponentPortal<T>(
         new ComponentPortal(
           componentOrTemplateRef,

tools/public_api_guard/material/dialog.md

@@ -133,9 +133,10 @@ export abstract class _MatDialogBase<C extends _MatDialogContainerBase> implemen
 }
 
 // @public
-export class MatDialogClose implements OnInit, OnChanges {
+export class MatDialogClose implements OnChanges {
     constructor(
-    dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
+    dialogRef: MatDialogRef<any>,
+    _elementRef?: any, _dialog?: any);
     ariaLabel: string;
     // @deprecated
     dialogRef: MatDialogRef<any>;
@@ -145,8 +146,6 @@ export class MatDialogClose implements OnInit, OnChanges {
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
     // (undocumented)
-    ngOnInit(): void;
-    // (undocumented)
     _onButtonClick(event: MouseEvent): void;
     type: 'submit' | 'button' | 'reset';
     // (undocumented)
@@ -283,7 +282,8 @@ export const enum MatDialogState {
 
 // @public
 export class MatDialogTitle implements OnInit {
-    constructor(_dialogRef: MatDialogRef<any>, _elementRef: ElementRef<HTMLElement>, _dialog: MatDialog);
+    constructor(_dialogRef: MatDialogRef<any>,
+    _elementRef?: any, _dialog?: any);
     id: string;
     // (undocumented)
     ngOnInit(): void;