feat: export Route interface to public API, and type route params

brandonroberts · May 11, 2020 · 37b24f7 · 37b24f7
1 parent a02a816
commit 37b24f7
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 6 deletions.
diff --git a/projects/router/src/lib/route-params.service.ts b/projects/router/src/lib/route-params.service.ts
@@ -4,4 +4,4 @@ export interface Params {
   [param: string]: any;
 }
 
-export class RouteParams extends Observable<Params> {}
+export class RouteParams<T extends Params = Params> extends Observable<T> {}
diff --git a/projects/router/src/public-api.ts b/projects/router/src/public-api.ts
@@ -4,6 +4,7 @@
 
 export * from './lib/router.service';
 export * from './lib/router.component';
+export * from './lib/route';
 export * from './lib/route.component';
 export * from './lib/router.module';
 export * from './lib/route-params.service';

diff --git a/src/app/blog/blog/blog.component.ts b/src/app/blog/blog/blog.component.ts
@@ -5,6 +5,7 @@ import { PostComponent } from '../post/post.component';
 
 import { PostsComponent } from './posts.component';
 import { CommonModule } from '@angular/common';
+import { Route } from '@blog/router';
 
 @Component({
   selector: 'app-blog',
@@ -19,7 +20,7 @@ import { CommonModule } from '@angular/common';
   `
 })
 export class BlogComponent {
-  routes = [
+  routes: Route[] = [
     { path: '/posts/:postId', component: PostComponent },
     { path: '', component: PostsComponent }
   ];

diff --git a/src/app/blog/post/post.component.ts b/src/app/blog/post/post.component.ts
@@ -27,7 +27,7 @@ import { PostService } from 'src/app/core/services';
 export class PostComponent {
   post$ = this.routeParams$.pipe(
     switchMap(params => 
-      this.postService.getPost(params['postId'])
+      this.postService.getPost(params.postId)
         .pipe(tap(() => {}, () => {
           this.router.go('/404');
         }))
@@ -36,7 +36,7 @@ export class PostComponent {
 
   constructor(
     private router: Router,
-    private routeParams$: RouteParams,
+    private routeParams$: RouteParams<{ postId: string }>,
     private postService: PostService
   ) { }
 

diff --git a/src/app/core/components/layout/layout.component.ts b/src/app/core/components/layout/layout.component.ts
@@ -8,7 +8,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
 
-import { RouterModule } from '@blog/router';
+import { RouterModule, Route } from '@blog/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -132,7 +132,7 @@ import { RedirectComponent } from '../redirect/redirect.component';
   `]
 })
 export class LayoutComponent {
-  routes = [
+  routes: Route[] = [
     { path: '/blog(.*)', loadComponent: () => import('src/app/blog/blog/blog.component').then(m => m.BlogComponent) },
     { path: '/404', component: PageNotFoundComponent },
     { path: '/talks', component: PageComponent },