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

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

@@ -8,8 +8,10 @@
 
 import {
   Directive,
+  inject,
   Inject,
   Injectable,
+  InjectFlags,
   Injector,
   Input,
   OnDestroy,
@@ -78,6 +80,18 @@ 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: Directionality | null = 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 +102,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();
   }
 
@@ -116,7 +117,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
 
   /** Close the currently opened context menu. */
   close() {
-    this.menuStack.closeAll();
+    this.menuStack?.closeAll();
   }
 
   /**
@@ -155,7 +156,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,
     });
   }
 
@@ -176,7 +177,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
 
   /** Subscribe to the menu stack close events and close this menu when requested. */
   private _setMenuStackCloseListener() {
-    this.menuStack.closed.pipe(takeUntil(this.destroyed)).subscribe(({item}) => {
+    this.menuStack?.closed.pipe(takeUntil(this.destroyed)).subscribe(({item}) => {
       if (item === this.childMenu && this.isOpen()) {
         this.closed.next();
         this.overlayRef!.detach();
@@ -200,7 +201,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
       }
       outsideClicks.pipe(takeUntil(this.stopOutsideClicksListener)).subscribe(event => {
         if (!this.isElementInsideMenuStack(event.target as Element)) {
-          this.menuStack.closeAll();
+          this.menuStack?.closeAll();
         }
       });
     }
@@ -218,7 +219,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
     if (this.isOpen()) {
       // since we're moving this menu we need to close any submenus first otherwise they end up
       // disconnected from this one.
-      this.menuStack.closeSubMenuOf(this.childMenu!);
+      this.menuStack?.closeSubMenuOf(this.childMenu!);
 
       (
         this.overlayRef!.getConfig().positionStrategy as FlexibleConnectedPositionStrategy

src/cdk/menu/menu-aim.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, NgZone, OnDestroy, InjectionToken, Directive} from '@angular/core';
+import {Injectable, NgZone, OnDestroy, InjectionToken, Directive, inject} from '@angular/core';
 import {fromEvent, Subject} from 'rxjs';
 import {takeUntil, filter} from 'rxjs/operators';
 import {PointerFocusTracker, FocusableElement} from './pointer-focus-tracker';
@@ -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';
@@ -54,6 +53,24 @@ 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: MenuAim | null = inject(
+    MENU_AIM,
+    InjectFlags.Optional | InjectFlags.Self,
+  );
+
+  /** The directionality (text direction) of the current page. */
+  protected readonly dir: Directionality | null = inject(Directionality, InjectFlags.Optional);
+
   /** The id of the menu's host element. */
   @Input() id = `cdk-menu-${nextId++}`;
 
@@ -67,9 +84,6 @@ export abstract class CdkMenuBase
   /** 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,20 +99,8 @@ 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,
-  ) {
+  protected constructor() {
     super();
-    this.nativeElement = elementRef.nativeElement;
   }
 
   ngAfterContentInit() {

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

@@ -7,7 +7,16 @@
  */
 
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
-import {Directive, ElementRef, Inject, NgZone, OnDestroy, Optional, Self} from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  inject,
+  Inject,
+  NgZone,
+  OnDestroy,
+  Optional,
+  Self,
+} from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {CdkMenuItemSelectable} from './menu-item-selectable';
 import {CdkMenuItem} from './menu-item';
@@ -37,33 +46,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();
   }