Differenzansicht 07-inputparams
im Vergleich zu 06-routing

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/app.config.ts CHANGED
@@ -1,5 +1,5 @@
1
  import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
2
- import { provideRouter } from '@angular/router';
3
 
4
  import { routes } from './app.routes';
5
 
@@ -7,6 +7,6 @@ export const appConfig: ApplicationConfig = {
7
  providers: [
8
  provideBrowserGlobalErrorListeners(),
9
  provideZoneChangeDetection({ eventCoalescing: true }),
10
- provideRouter(routes)
11
  ]
12
  };
 
1
  import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
2
+ import { provideRouter, withComponentInputBinding } from '@angular/router';
3
 
4
  import { routes } from './app.routes';
5
 
 
7
  providers: [
8
  provideBrowserGlobalErrorListeners(),
9
  provideZoneChangeDetection({ eventCoalescing: true }),
10
+ provideRouter(routes, withComponentInputBinding())
11
  ]
12
  };
src/app/books-portal/book-details-page/book-details-page.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { Component, inject, signal } from '@angular/core';
2
- import { ActivatedRoute, RouterLink } from '@angular/router';
3
 
4
- import { Book } from '../../shared/book';
5
  import { BookStore } from '../../shared/book-store';
6
 
7
  @Component({
@@ -12,14 +11,7 @@ import { BookStore } from '../../shared/book-store';
12
  })
13
  export class BookDetailsPage {
14
  #bookStore = inject(BookStore);
15
- #route = inject(ActivatedRoute);
16
 
17
- protected book = signal<Book | undefined>(undefined);
18
-
19
- constructor() {
20
- const isbn = this.#route.snapshot.paramMap.get('isbn');
21
- if (isbn) {
22
- this.book.set(this.#bookStore.getSingle(isbn));
23
- }
24
- }
25
  }
 
1
+ import { Component, computed, inject, input } from '@angular/core';
2
+ import { RouterLink } from '@angular/router';
3
 
 
4
  import { BookStore } from '../../shared/book-store';
5
 
6
  @Component({
 
11
  })
12
  export class BookDetailsPage {
13
  #bookStore = inject(BookStore);
 
14
 
15
+ readonly isbn = input.required<string>();
16
+ protected book = computed(() => this.#bookStore.getSingle(this.isbn()));
 
 
 
 
 
 
17
  }