feat: add functions to expose router injectables through inject() API (#93)

Author: brandonroberts

apps/example-app/src/app/auth/effects/auth.effects.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular-component/router';
+import { getRouter } from '@angular-component/router';
 import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { of } from 'rxjs';
 import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
@@ -16,6 +16,8 @@ import { UserActions } from '@example-app/core/actions';
 
 @Injectable()
 export class AuthEffects {
+  private router = getRouter();
+
   login$ = createEffect(() =>
     this.actions$.pipe(
       ofType(LoginPageActions.login),
@@ -77,7 +79,6 @@ export class AuthEffects {
   constructor(
     private actions$: Actions,
     private authService: AuthService,
-    private router: Router,
     private dialog: MatDialog
   ) {}
 }

apps/example-app/src/app/books/containers/view-book-page.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { RouteParams } from '@angular-component/router';
+import { getRouteParams } from '@angular-component/router';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -24,12 +24,10 @@ import { ViewBookPageActions } from '@example-app/books/actions';
 })
 export class ViewBookPageComponent implements OnDestroy {
   actionsSubscription: Subscription;
+  private routeParams$ = getRouteParams<{ id: string }>();
 
-  constructor(
-    store: Store<fromBooks.State>,
-    routeParams$: RouteParams<{ id: string }>
-  ) {
-    this.actionsSubscription = routeParams$
+  constructor(store: Store<fromBooks.State>) {
+    this.actionsSubscription = this.routeParams$
       .pipe(map((params) => ViewBookPageActions.selectBook({ id: params.id })))
       .subscribe((action) => store.dispatch(action));
   }

apps/example-app/src/app/core/containers/not-found-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Router } from '@angular-component/router';
+import { getRouter } from '@angular-component/router';
 
 @Component({
   selector: 'bc-not-found-page',
@@ -26,7 +26,7 @@ import { Router } from '@angular-component/router';
   ],
 })
 export class NotFoundPageComponent {
-  constructor(private router: Router) {}
+  private router = getRouter();
 
   goHome() {
     this.router.go('/');

libs/router/src/lib/link-active.directive.ts

@@ -14,7 +14,7 @@ import {
 import { LinkTo } from './link-to.directive';
 import { Router } from './router.service';
 import { combineLatest, of, Subject, Subscription } from 'rxjs';
-import { map, mapTo, startWith, takeUntil } from 'rxjs/operators';
+import { map, startWith, takeUntil } from 'rxjs/operators';
 import { filterNullable } from './operators/filter-nullable.operator';
 
 export interface LinkActiveOptions {
@@ -78,21 +78,19 @@ export class LinkActive implements AfterContentInit, OnDestroy, OnChanges {
     }
 
     const contentLinks$ = this.links
-      ? this.links
-          .toArray()
-          .map((link) =>
-            link.hrefUpdated.pipe(
-              startWith(link.linkHref),
-              mapTo(link.linkHref),
-              filterNullable()
-            )
+      ? this.links.toArray().map((link) =>
+          link.hrefUpdated.pipe(
+            startWith(link.linkHref),
+            map(() => link.linkHref),
+            filterNullable()
           )
+        )
       : [];
 
     const link$ = this.link
       ? this.link.hrefUpdated.pipe(
           startWith(this.link.linkHref),
-          mapTo(this.link.linkHref),
+          map(() => this.link.linkHref),
           filterNullable()
         )
       : of('');

libs/router/src/lib/route-component.directive.ts

@@ -1,9 +1,9 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, Type } from '@angular/core';
 
 @Directive({
   selector: '[routeComponent]',
   standalone: true,
 })
 export class RouteComponentTemplate {
-  @Input() routeComponent: any;
+  @Input() routeComponent: Type<any>;
 }

libs/router/src/lib/route-params.service.ts

@@ -1,3 +1,4 @@
+import { inject } from '@angular/core';
 import { Observable } from 'rxjs';
 
 export interface Params {
@@ -15,3 +16,30 @@ export function compareParams(previous: Params, current: Params): boolean {
     previous === current || JSON.stringify(previous) === JSON.stringify(current)
   );
 }
+
+/**
+ * Returns the RoutePath observable from the current injector
+ *
+ * @returns RoutePath
+ */
+export function getRoutePath<T extends string = string>() {
+  return inject<RoutePath<T>>(RoutePath);
+}
+
+/**
+ * Returns the RoutePath observable from the current injector
+ *
+ * @returns RouteParams
+ */
+export function getRouteParams<T extends Params = Params>() {
+  return inject<RouteParams<T>>(RouteParams);
+}
+
+/**
+ * Returns the QueryParams observable from the current injector
+ *
+ * @returns QueryParams
+ */
+export function getQueryParams<T extends Params = Params>() {
+  return inject<QueryParams<T>>(QueryParams);
+}

libs/router/src/lib/route.component.ts

@@ -29,14 +29,6 @@ import { Params, RouteParams, RoutePath } from './route-params.service';
 import { RouterComponent } from './router.component';
 import { Router } from './router.service';
 
-export function getRouteParams(routeComponent: RouteComponent) {
-  return routeComponent.routeParams$;
-}
-
-export function getRoutePath(routeComponent: RouteComponent) {
-  return routeComponent.routePath$;
-}
-
 interface State {
   params: Params;
   path: string;
@@ -59,12 +51,16 @@ interface State {
   providers: [
     {
       provide: RouteParams,
-      useFactory: getRouteParams,
+      useFactory(routeComponent: RouteComponent) {
+        return routeComponent.routeParams$;
+      },
       deps: [[new Self(), RouteComponent]],
     },
     {
       provide: RoutePath,
-      useFactory: getRoutePath,
+      useFactory(routeComponent: RouteComponent) {
+        return routeComponent.routePath$;
+      },
       deps: [[new Self(), RouteComponent]],
     },
   ],

libs/router/src/lib/router.module.ts

@@ -22,15 +22,17 @@ export const components = [
   RouteComponentTemplate,
 ];
 
-export function getQueryParams(router: Router) {
-  return router.queryParams$;
-}
-
 export function provideComponentRouter() {
   return [
     UrlParser,
     { provide: LocationStrategy, useClass: PathLocationStrategy },
-    { provide: QueryParams, deps: [Router], useFactory: getQueryParams },
+    {
+      provide: QueryParams,
+      deps: [Router],
+      useFactory(router: Router) {
+        return router.queryParams$;
+      },
+    },
   ];
 }
 

libs/router/src/lib/router.service.ts

@@ -124,3 +124,12 @@ export class Router {
     return new URLSearchParams(params).toString();
   }
 }
+
+/**
+ * Returns the Router instance from the current injector
+ *
+ * @returns Router
+ */
+export function getRouter() {
+  return inject(Router);
+}