feat(angular): add standalone providers, route strategy, component binding provider (#27997)

packages/angular/common/src/directives/navigation/router-outlet.ts

@@ -20,6 +20,7 @@ import {
   Injectable,
   reflectComponentType,
 } from '@angular/core';
+import type { Provider } from '@angular/core';
 import { OutletContext, Router, ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Data } from '@angular/router';
 import { componentOnReady } from '@ionic/core/components';
 import type { AnimationBuilder } from '@ionic/core/components';
@@ -433,7 +434,7 @@ class OutletInjector implements Injector {
 }
 
 // TODO: FW-4785 - Remove this once Angular 15 support is dropped
-export const INPUT_BINDER = new InjectionToken<RoutedComponentInputBinder>('');
+const INPUT_BINDER = new InjectionToken<RoutedComponentInputBinder>('');
 
 /**
  * Injectable used as a tree-shakable provider for opting in to binding router data to component
@@ -450,7 +451,7 @@ export const INPUT_BINDER = new InjectionToken<RoutedComponentInputBinder>('');
  * the subscriptions are cleaned up.
  */
 @Injectable()
-export class RoutedComponentInputBinder {
+class RoutedComponentInputBinder {
   private outletDataSubscriptions = new Map<IonRouterOutlet, Subscription>();
 
   bindActivatedRouteToOutletComponent(outlet: IonRouterOutlet): void {
@@ -507,3 +508,22 @@ export class RoutedComponentInputBinder {
     this.outletDataSubscriptions.set(outlet, dataSubscription);
   }
 }
+
+export const provideComponentInputBinding = (): Provider => {
+  return {
+    provide: INPUT_BINDER,
+    useFactory: componentInputBindingFactory,
+    deps: [Router],
+  };
+};
+
+function componentInputBindingFactory(router?: Router) {
+  /**
+   * We cast the router to any here, since the componentInputBindingEnabled
+   * property is not available until Angular v16.
+   */
+  if ((router as any)?.componentInputBindingEnabled) {
+    return new RoutedComponentInputBinder();
+  }
+  return null;
+}

packages/angular/common/src/index.ts

@@ -24,7 +24,7 @@ export { NavParams } from './directives/navigation/nav-params';
 export { IonPopover } from './overlays/popover';
 export { IonModal } from './overlays/modal';
 
-export { IonRouterOutlet, INPUT_BINDER, RoutedComponentInputBinder } from './directives/navigation/router-outlet';
+export { IonRouterOutlet, provideComponentInputBinding } from './directives/navigation/router-outlet';
 export type { StackEvent } from './directives/navigation/stack-utils';
 
 export { IonBackButtonDelegate } from './directives/navigation/back-button';
@@ -36,3 +36,5 @@ export { NavDelegate } from './directives/navigation/nav-delegate';
 export { IonTabs } from './directives/navigation/tabs';
 
 export { ProxyCmp } from './utils/proxy';
+
+export { IonicRouteStrategy } from './utils/routing';

packages/angular/common/src/utils/routing.ts

@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+
+/**
+ * Provides a way to customize when activated routes get reused.
+ */
+export class IonicRouteStrategy implements RouteReuseStrategy {
+  /**
+   * Whether the given route should detach for later reuse.
+   */
+  shouldDetach(_route: ActivatedRouteSnapshot): boolean {
+    return false;
+  }
+
+  /**
+   * Returns `false`, meaning the route (and its subtree) is never reattached
+   */
+  shouldAttach(_route: ActivatedRouteSnapshot): boolean {
+    return false;
+  }
+
+  /**
+   * A no-op; the route is never stored since this strategy never detaches routes for later re-use.
+   */
+  store(_route: ActivatedRouteSnapshot, _detachedTree: DetachedRouteHandle): void {
+    return;
+  }
+
+  /**
+   * Returns `null` because this strategy does not store routes for later re-use.
+   */
+  retrieve(_route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
+    return null;
+  }
+
+  /**
+   * Determines if a route should be reused.
+   * This strategy returns `true` when the future route config and
+   * current route config are identical and all route parameters are identical.
+   */
+  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    if (future.routeConfig !== curr.routeConfig) {
+      return false;
+    }
+
+    // checking router params
+    const futureParams = future.params;
+    const currentParams = curr.params;
+    const keysA = Object.keys(futureParams);
+    const keysB = Object.keys(currentParams);
+
+    if (keysA.length !== keysB.length) {
+      return false;
+    }
+
+    // Test for A's keys different from B.
+    for (const key of keysA) {
+      if (currentParams[key] !== futureParams[key]) {
+        return false;
+      }
+    }
+    return true;
+  }
+}