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

crisbeto · crisbeto · commit 990e79ae5559 · 2022-03-11T10:07:17.000+01:00
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.
diff --git a/src/material-experimental/mdc-dialog/dialog-content-directives.ts b/src/material-experimental/mdc-dialog/dialog-content-directives.ts
@@ -9,15 +9,14 @@
 import {
   Directive,
   ElementRef,
+  Inject,
   Input,
   OnChanges,
   OnInit,
-  Optional,
   SimpleChanges,
 } 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 +34,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;
 
@@ -48,24 +47,15 @@ export class MatDialogClose implements OnInit, OnChanges {
   @Input('matDialogClose') _matDialogClose: any;
 
   constructor(
-    // 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,
+    public dialogRef: MatDialogRef<any>,
+    /**
+     * @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'];
 
@@ -102,27 +92,23 @@ export class MatDialogTitle implements OnInit {
   @Input() id: string = `mat-mdc-dialog-title-${dialogElementUid++}`;
 
   constructor(
-    // 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,
+    private _dialogRef: MatDialogRef<any>,
+    /**
+     * @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;
+    Promise.resolve().then(() => {
+      const container = this._dialogRef._containerInstance;
 
-        if (container && !container._ariaLabelledBy) {
-          container._ariaLabelledBy = this.id;
-        }
-      });
-    }
+      if (container && !container._ariaLabelledBy) {
+        container._ariaLabelledBy = this.id;
+      }
+    });
   }
 }
 
@@ -153,18 +139,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;
-}
diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts
@@ -11,11 +11,10 @@ import {
   Input,
   OnChanges,
   OnInit,
-  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 +32,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;
 
@@ -53,22 +52,15 @@ 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,
+    public dialogRef: MatDialogRef<any>,
+    /**
+     * @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'];
 
@@ -106,27 +98,23 @@ export class MatDialogTitle implements OnInit {
   @Input() id: string = `mat-dialog-title-${dialogElementUid++}`;
 
   constructor(
-    // 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,
+    private _dialogRef: MatDialogRef<any>,
+    /**
+     * @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;
+    Promise.resolve().then(() => {
+      const container = this._dialogRef._containerInstance;
 
-        if (container && !container._ariaLabelledBy) {
-          container._ariaLabelledBy = this.id;
-        }
-      });
-    }
+      if (container && !container._ariaLabelledBy) {
+        container._ariaLabelledBy = this.id;
+      }
+    });
   }
 }
 
@@ -157,18 +145,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;
-}
diff --git a/src/material/dialog/dialog.ts b/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,
diff --git a/tools/public_api_guard/material/dialog.md b/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,14 +146,12 @@ export class MatDialogClose implements OnInit, OnChanges {
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
     // (undocumented)
-    ngOnInit(): void;
-    // (undocumented)
     _onButtonClick(event: MouseEvent): void;
     type: 'submit' | 'button' | 'reset';
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogClose, "[mat-dialog-close], [matDialogClose]", ["matDialogClose"], { "ariaLabel": "aria-label"; "type": "type"; "dialogResult": "mat-dialog-close"; "_matDialogClose": "matDialogClose"; }, {}, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogClose, [{ optional: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogClose, never>;
 }
 
 // @public
@@ -283,14 +282,15 @@ 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;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatDialogTitle, "[mat-dialog-title], [matDialogTitle]", ["matDialogTitle"], { "id": "id"; }, {}, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, [{ optional: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDialogTitle, never>;
 }
 
 // @public
