solve--use-router-with-component-input-bindings

src/app/app.config.ts

@@ -1,8 +1,11 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideHttpClient } from '@angular/common/http';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(), provideRouter(routes)]
+  providers: [
+    provideHttpClient(),
+    provideRouter(routes, withComponentInputBinding())
+  ]
 };

src/app/book/book-detail/book-detail.component.ts

@@ -1,7 +1,6 @@
-import { Component } from '@angular/core';
-import { Observable, switchMap } from 'rxjs';
+import { Component, inject, Input } from '@angular/core';
+import { Observable } from 'rxjs';
 import { Book } from '../book';
-import { ActivatedRoute } from '@angular/router';
 import { BookApiService } from '../book-api.service';
 import { AsyncPipe } from '@angular/common';
 
@@ -13,14 +12,11 @@ import { AsyncPipe } from '@angular/common';
   styleUrl: './book-detail.component.scss'
 })
 export class BookDetailComponent {
-  book$: Observable<Book>;
+  private readonly bookApi = inject(BookApiService);
+  book$!: Observable<Book>;
 
-  constructor(
-    private readonly route: ActivatedRoute,
-    private readonly bookApi: BookApiService
-  ) {
-    this.book$ = this.route.params.pipe(
-      switchMap(params => this.bookApi.getByIsbn(params?.['isbn']))
-    );
+  @Input({ required: true })
+  set isbn(isbn: string) {
+    this.book$ = this.bookApi.getByIsbn(isbn);
   }
 }