refactor(cdk/menu): use inject for all injection (#24941)

This change switches the cdk menu from using constructor injection to using the `inject` function. This was enabled by angular/angular#45991. This approach has a number of advantages:

* We can add and remove injectables without changing the public constructor signature
* It reduces the boilerplate of passing arguments through `super`
* It avoids long/messy constructor blocks in favor of simpler member definitions.
* This sidesteps a common pitfall of making `@Optional` injection (`null` if not provided) as an optional parameter (`undefined` if not provided)`.

Author: jelbourn

package.json

@@ -54,12 +54,12 @@
   },
   "version": "14.1.0-next.0",
   "dependencies": {
-    "@angular/animations": "14.0.0-rc.0",
-    "@angular/common": "14.0.0-rc.0",
-    "@angular/compiler": "14.0.0-rc.0",
-    "@angular/core": "14.0.0-rc.0",
-    "@angular/forms": "14.0.0-rc.0",
-    "@angular/platform-browser": "14.0.0-rc.0",
+    "@angular/animations": "14.0.0-rc.1",
+    "@angular/common": "14.0.0-rc.1",
+    "@angular/compiler": "14.0.0-rc.1",
+    "@angular/core": "14.0.0-rc.1",
+    "@angular/forms": "14.0.0-rc.1",
+    "@angular/platform-browser": "14.0.0-rc.1",
     "@types/google.maps": "^3.47.3",
     "@types/youtube": "^0.0.46",
     "rxjs": "^6.6.7",
@@ -68,17 +68,17 @@
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.0.0-rc.0",
-    "@angular-devkit/core": "14.0.0-rc.0",
-    "@angular-devkit/schematics": "14.0.0-rc.0",
-    "@angular/bazel": "14.0.0-rc.0",
-    "@angular/cli": "14.0.0-rc.0",
-    "@angular/compiler-cli": "14.0.0-rc.0",
+    "@angular-devkit/build-angular": "14.0.0-rc.1",
+    "@angular-devkit/core": "14.0.0-rc.1",
+    "@angular-devkit/schematics": "14.0.0-rc.1",
+    "@angular/bazel": "14.0.0-rc.1",
+    "@angular/cli": "14.0.0-rc.1",
+    "@angular/compiler-cli": "14.0.0-rc.1",
     "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#ce1d7f6c62ff0f9569791d78920c3628c56b4574",
-    "@angular/localize": "14.0.0-rc.0",
-    "@angular/platform-browser-dynamic": "14.0.0-rc.0",
-    "@angular/platform-server": "14.0.0-rc.0",
-    "@angular/router": "14.0.0-rc.0",
+    "@angular/localize": "14.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "14.0.0-rc.1",
+    "@angular/platform-server": "14.0.0-rc.1",
+    "@angular/router": "14.0.0-rc.1",
     "@axe-core/webdriverjs": "^4.3.2",
     "@babel/core": "^7.16.12",
     "@bazel/bazelisk": "~1.11.0",
@@ -143,7 +143,7 @@
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@schematics/angular": "14.0.0-rc.0",
+    "@schematics/angular": "14.0.0-rc.1",
     "@types/babel__core": "^7.1.18",
     "@types/browser-sync": "^2.26.3",
     "@types/fs-extra": "^9.0.13",

src/cdk/menu/context-menu-trigger.ts

@@ -6,16 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  Directive,
-  Inject,
-  Injectable,
-  Injector,
-  Input,
-  OnDestroy,
-  Optional,
-  ViewContainerRef,
-} from '@angular/core';
+import {Directive, inject, Injectable, InjectFlags, Input, OnDestroy} from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {
   FlexibleConnectedPositionStrategy,
@@ -78,6 +69,15 @@ export type ContextMenuCoordinates = {x: number; y: number};
   ],
 })
 export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
+  /** The CDK overlay service. */
+  private readonly _overlay = inject(Overlay);
+
+  /** The directionality of the page. */
+  private readonly _directionality = inject(Directionality, InjectFlags.Optional);
+
+  /** The app's context menu tracking registry */
+  private readonly _contextMenuTracker = inject(ContextMenuTracker);
+
   /** Whether the context menu is disabled. */
   @Input('cdkContextMenuDisabled')
   get disabled(): boolean {
@@ -88,21 +88,8 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
   }
   private _disabled = false;
 
-  constructor(
-    /** The DI injector for this component */
-    injector: Injector,
-    /** The view container ref for this component */
-    viewContainerRef: ViewContainerRef,
-    /** The CDK overlay service */
-    private readonly _overlay: Overlay,
-    /** The app's context menu tracking registry */
-    private readonly _contextMenuTracker: ContextMenuTracker,
-    /** The menu stack this menu is part of. */
-    @Inject(MENU_STACK) menuStack: MenuStack,
-    /** The directionality of the current page */
-    @Optional() private readonly _directionality?: Directionality,
-  ) {
-    super(injector, viewContainerRef, menuStack);
+  constructor() {
+    super();
     this._setMenuStackCloseListener();
   }
 
@@ -155,7 +142,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
     return new OverlayConfig({
       positionStrategy: this._getOverlayPositionStrategy(coordinates),
       scrollStrategy: this._overlay.scrollStrategies.reposition(),
-      direction: this._directionality,
+      direction: this._directionality || undefined,
     });
   }
 

src/cdk/menu/menu-aim.ts

@@ -6,12 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, NgZone, OnDestroy, InjectionToken, Directive} from '@angular/core';
+import {Directive, inject, Injectable, InjectionToken, NgZone, OnDestroy} from '@angular/core';
 import {fromEvent, Subject} from 'rxjs';
-import {takeUntil, filter} from 'rxjs/operators';
-import {PointerFocusTracker, FocusableElement} from './pointer-focus-tracker';
+import {filter, takeUntil} from 'rxjs/operators';
+import {FocusableElement, PointerFocusTracker} from './pointer-focus-tracker';
 import {Menu} from './menu-interface';
-import {throwMissingPointerFocusTracker, throwMissingMenuReference} from './menu-errors';
+import {throwMissingMenuReference, throwMissingPointerFocusTracker} from './menu-errors';
 
 /**
  * MenuAim is responsible for determining if a sibling menuitem's menu should be closed when a
@@ -102,6 +102,9 @@ function isWithinSubmenu(submenuPoints: DOMRect, m: number, b: number) {
  */
 @Injectable()
 export class TargetMenuAim implements MenuAim, OnDestroy {
+  /** The Angular zone. */
+  private readonly _ngZone = inject(NgZone);
+
   /** The last NUM_POINTS mouse move events. */
   private readonly _points: Point[] = [];
 
@@ -117,11 +120,6 @@ export class TargetMenuAim implements MenuAim, OnDestroy {
   /** Emits when this service is destroyed. */
   private readonly _destroyed: Subject<void> = new Subject();
 
-  constructor(
-    /** The Angular zone. */
-    private readonly _ngZone: NgZone,
-  ) {}
-
   ngOnDestroy() {
     this._destroyed.next();
     this._destroyed.complete();

src/cdk/menu/menu-bar.ts

@@ -6,16 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  AfterContentInit,
-  Directive,
-  ElementRef,
-  Inject,
-  NgZone,
-  Optional,
-  Self,
-} from '@angular/core';
-import {Directionality} from '@angular/cdk/bidi';
+import {AfterContentInit, Directive} from '@angular/core';
 import {
   DOWN_ARROW,
   ESCAPE,
@@ -29,7 +20,6 @@ import {takeUntil} from 'rxjs/operators';
 import {CdkMenuGroup} from './menu-group';
 import {CDK_MENU} from './menu-interface';
 import {FocusNext, MENU_STACK, MenuStack} from './menu-stack';
-import {MENU_AIM, MenuAim} from './menu-aim';
 import {CdkMenuBase} from './menu-base';
 
 /**
@@ -59,21 +49,6 @@ export class CdkMenuBar extends CdkMenuBase implements AfterContentInit {
   /** Whether the menu is displayed inline (i.e. always present vs a conditional popup that the user triggers with a trigger element). */
   override readonly isInline = true;
 
-  constructor(
-    /** The host element. */
-    elementRef: ElementRef<HTMLElement>,
-    /** The Angular zone. */
-    ngZone: NgZone,
-    /** The menu stack this menu is part of. */
-    @Inject(MENU_STACK) menuStack: MenuStack,
-    /** The menu aim service used by this menu. */
-    @Self() @Optional() @Inject(MENU_AIM) menuAim?: MenuAim,
-    /** The directionality of the page. */
-    @Optional() dir?: Directionality,
-  ) {
-    super(elementRef, ngZone, menuStack, menuAim, dir);
-  }
-
   override ngAfterContentInit() {
     super.ngAfterContentInit();
     this._subscribeToMenuStackEmptied();

src/cdk/menu/menu-base.ts

@@ -12,13 +12,12 @@ import {
   ContentChildren,
   Directive,
   ElementRef,
-  Inject,
+  inject,
+  InjectFlags,
   Input,
   NgZone,
   OnDestroy,
-  Optional,
   QueryList,
-  Self,
 } from '@angular/core';
 import {FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y';
 import {CdkMenuItem} from './menu-item';
@@ -28,7 +27,7 @@ import {mapTo, mergeAll, mergeMap, startWith, switchMap, takeUntil} from 'rxjs/o
 import {MENU_STACK, MenuStack, MenuStackItem} from './menu-stack';
 import {Menu} from './menu-interface';
 import {PointerFocusTracker} from './pointer-focus-tracker';
-import {MENU_AIM, MenuAim} from './menu-aim';
+import {MENU_AIM} from './menu-aim';
 
 /** Counter used to create unique IDs for menus. */
 let nextId = 0;
@@ -54,6 +53,21 @@ export abstract class CdkMenuBase
   extends CdkMenuGroup
   implements Menu, AfterContentInit, OnDestroy
 {
+  /** The menu's native DOM host element. */
+  readonly nativeElement: HTMLElement = inject(ElementRef).nativeElement;
+
+  /** The Angular zone. */
+  protected ngZone = inject(NgZone);
+
+  /** The stack of menus this menu belongs to. */
+  readonly menuStack: MenuStack = inject(MENU_STACK);
+
+  /** The menu aim service used by this menu. */
+  protected readonly menuAim = inject(MENU_AIM, InjectFlags.Optional | InjectFlags.Self);
+
+  /** The directionality (text direction) of the current page. */
+  protected readonly dir = inject(Directionality, InjectFlags.Optional);
+
   /** The id of the menu's host element. */
   @Input() id = `cdk-menu-${nextId++}`;
 
@@ -64,12 +78,12 @@ export abstract class CdkMenuBase
   /** The direction items in the menu flow. */
   orientation: 'horizontal' | 'vertical' = 'vertical';
 
-  /** Whether the menu is displayed inline (i.e. always present vs a conditional popup that the user triggers with a trigger element). */
+  /**
+   * Whether the menu is displayed inline (i.e. always present vs a conditional popup that the
+   * user triggers with a trigger element).
+   */
   isInline = false;
 
-  /** The menu's native DOM host element. */
-  readonly nativeElement: HTMLElement;
-
   /** Handles keyboard events for the menu. */
   protected keyManager: FocusKeyManager<CdkMenuItem>;
 
@@ -85,22 +99,6 @@ export abstract class CdkMenuBase
   /** Whether this menu's menu stack has focus. */
   private _menuStackHasFocus = false;
 
-  protected constructor(
-    /** The host element. */
-    elementRef: ElementRef<HTMLElement>,
-    /** The Angular zone. */
-    protected ngZone: NgZone,
-    /** The stack of menus this menu belongs to. */
-    @Inject(MENU_STACK) readonly menuStack: MenuStack,
-    /** The menu aim service used by this menu. */
-    @Self() @Optional() @Inject(MENU_AIM) protected readonly menuAim?: MenuAim,
-    /** The directionality of the current page. */
-    @Optional() protected readonly dir?: Directionality,
-  ) {
-    super();
-    this.nativeElement = elementRef.nativeElement;
-  }
-
   ngAfterContentInit() {
     if (!this.isInline) {
       this.menuStack.push(this);

src/cdk/menu/menu-item-radio.ts

@@ -7,14 +7,9 @@
  */
 
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
-import {Directive, ElementRef, Inject, NgZone, OnDestroy, Optional, Self} from '@angular/core';
-import {Directionality} from '@angular/cdk/bidi';
+import {Directive, inject, OnDestroy} from '@angular/core';
 import {CdkMenuItemSelectable} from './menu-item-selectable';
 import {CdkMenuItem} from './menu-item';
-import {CdkMenuTrigger} from './menu-trigger';
-import {CDK_MENU, Menu} from './menu-interface';
-import {MENU_AIM, MenuAim} from './menu-aim';
-import {MENU_STACK, MenuStack} from './menu-stack';
 
 /** Counter used to set a unique id and name for a selectable item */
 let nextId = 0;
@@ -37,33 +32,17 @@ let nextId = 0;
   ],
 })
 export class CdkMenuItemRadio extends CdkMenuItemSelectable implements OnDestroy {
+  /** The unique selection dispatcher for this radio's `CdkMenuGroup`. */
+  private readonly _selectionDispatcher = inject(UniqueSelectionDispatcher);
+
   /** An ID to identify this radio item to the `UniqueSelectionDisptcher`. */
   private _id = `${nextId++}`;
 
   /** Function to unregister the selection dispatcher */
   private _removeDispatcherListener: () => void;
 
-  constructor(
-    /** The host element for this radio item. */
-    element: ElementRef<HTMLElement>,
-    /** The Angular zone. */
-    ngZone: NgZone,
-    /** The unique selection dispatcher for this radio's `CdkMenuGroup`. */
-    private readonly _selectionDispatcher: UniqueSelectionDispatcher,
-    /** The menu stack this item belongs to. */
-    @Inject(MENU_STACK) menuStack: MenuStack,
-    /** The parent menu for this item. */
-    @Optional() @Inject(CDK_MENU) parentMenu?: Menu,
-    /** The menu aim used for this item. */
-    @Optional() @Inject(MENU_AIM) menuAim?: MenuAim,
-    /** The directionality of the page. */
-    @Optional() dir?: Directionality,
-    /** Reference to the CdkMenuItemTrigger directive if one is added to the same element */
-    // tslint:disable-next-line: lightweight-tokens
-    @Self() @Optional() menuTrigger?: CdkMenuTrigger,
-  ) {
-    super(element, ngZone, menuStack, parentMenu, menuAim, dir, menuTrigger);
-
+  constructor() {
+    super();
     this._registerDispatcherListener();
   }