Differenzansicht 07-inputparams
im Vergleich zu 06-routing

← Zurück zur Übersicht | Demo | Quelltext auf GitHub
src/app/app.config.ts CHANGED
@@ -1,8 +1,11 @@
1
  import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
2
- import { provideRouter } from '@angular/router';
3
 
4
  import { routes } from './app.routes';
5
 
6
  export const appConfig: ApplicationConfig = {
7
- providers: [provideExperimentalZonelessChangeDetection(), provideRouter(routes)]
 
 
 
8
  };
 
1
  import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
2
+ import { provideRouter, withComponentInputBinding } from '@angular/router';
3
 
4
  import { routes } from './app.routes';
5
 
6
  export const appConfig: ApplicationConfig = {
7
+ providers: [
8
+ provideExperimentalZonelessChangeDetection(),
9
+ provideRouter(routes, withComponentInputBinding())
10
+ ]
11
  };
src/app/books-portal/book-details/book-details.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 BookDetails {
14
  #store = inject(BookStore);
15
- #route = inject(ActivatedRoute);
16
 
17
- readonly 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.#store.getOneBook(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 BookDetails {
13
  #store = inject(BookStore);
 
14
 
15
+ readonly isbn = input.required<string>();
16
+ readonly book = computed(() => this.#store.getOneBook(this.isbn()))
 
 
 
 
 
 
17
  }