diff --git a/src/app/app.config.ts b/src/app/app.config.ts index e531f85..f3884a4 100644 --- a/src/app/app.config.ts +++ b/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()) + ] }; diff --git a/src/app/book/book-detail/book-detail.component.ts b/src/app/book/book-detail/book-detail.component.ts index 5f7f310..d274fed 100644 --- a/src/app/book/book-detail/book-detail.component.ts +++ b/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; + private readonly bookApi = inject(BookApiService); + book$!: Observable; - 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); } }