Differenzansicht 06-routing
im Vergleich zu 05-di

← Zurück zur Ãœbersicht | Demo | Quelltext auf GitHub
src/app/app-routing.module.ts CHANGED
@@ -1,7 +1,19 @@
1
  import { NgModule } from '@angular/core';
2
  import { RouterModule, Routes } from '@angular/router';
3
 
4
- const routes: Routes = [];
 
 
 
 
 
 
 
 
 
 
 
 
5
 
6
  @NgModule({
7
  imports: [RouterModule.forRoot(routes)],
1
  import { NgModule } from '@angular/core';
2
  import { RouterModule, Routes } from '@angular/router';
3
 
4
+ import { HomeComponent } from './home/home.component';
5
+
6
+ const routes: Routes = [
7
+ {
8
+ path: '',
9
+ redirectTo: 'home',
10
+ pathMatch: 'full'
11
+ },
12
+ {
13
+ path: 'home',
14
+ component: HomeComponent,
15
+ },
16
+ ];
17
 
18
  @NgModule({
19
  imports: [RouterModule.forRoot(routes)],
src/app/app.component.html CHANGED
@@ -1,6 +1,8 @@
 
 
 
 
 
1
  <main>
2
- <bm-book-list *ngIf="!book"
3
- (selectBook)="showDetails($event)"></bm-book-list>
4
- <bm-book-details *ngIf="book"
5
- (leave)="showList()" [book]="book"></bm-book-details>
6
  </main>
1
+ <nav>
2
+ <a routerLink="/home" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a>
3
+ <a routerLink="/books" routerLinkActive="active" ariaCurrentWhenActive="page">Books</a>
4
+ </nav>
5
+
6
  <main>
7
+ <router-outlet></router-outlet>
 
 
 
8
  </main>
src/app/app.component.ts CHANGED
@@ -1,5 +1,4 @@
1
  import { Component } from '@angular/core';
2
- import { Book } from './shared/book';
3
 
4
  @Component({
5
  selector: 'bm-root',
@@ -7,14 +6,4 @@ import { Book } from './shared/book';
7
  standalone: false,
8
  styleUrl: './app.component.css'
9
  })
10
- export class AppComponent {
11
- book: Book | null = null;
12
-
13
- showList() {
14
- this.book = null;
15
- }
16
-
17
- showDetails(book: Book) {
18
- this.book = book;
19
- }
20
- }
1
  import { Component } from '@angular/core';
 
2
 
3
  @Component({
4
  selector: 'bm-root',
6
  standalone: false,
7
  styleUrl: './app.component.css'
8
  })
9
+ export class AppComponent {}
 
 
 
 
 
 
 
 
 
 
src/app/app.module.ts CHANGED
@@ -4,10 +4,12 @@ import { BrowserModule } from '@angular/platform-browser';
4
  import { AppRoutingModule } from './app-routing.module';
5
  import { AppComponent } from './app.component';
6
  import { BooksModule } from './books/books.module';
 
7
 
8
  @NgModule({
9
  declarations: [
10
  AppComponent,
 
11
  ],
12
  imports: [
13
  BrowserModule,
4
  import { AppRoutingModule } from './app-routing.module';
5
  import { AppComponent } from './app.component';
6
  import { BooksModule } from './books/books.module';
7
+ import { HomeComponent } from './home/home.component';
8
 
9
  @NgModule({
10
  declarations: [
11
  AppComponent,
12
+ HomeComponent,
13
  ],
14
  imports: [
15
  BrowserModule,
src/app/books/book-details/book-details.component.html CHANGED
@@ -22,7 +22,5 @@
22
  <img *ngIf="book.thumbnailUrl"
23
  [src]="book.thumbnailUrl"
24
  alt="Cover">
25
- <button class="arrow-left" (click)="doLeave()">
26
- Back to list
27
- </button>
28
  </div>
22
  <img *ngIf="book.thumbnailUrl"
23
  [src]="book.thumbnailUrl"
24
  alt="Cover">
25
+ <a class="button arrow-left" routerLink="..">Back to list</a>
 
 
26
  </div>
src/app/books/book-details/book-details.component.ts CHANGED
@@ -1,4 +1,7 @@
1
- import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 
 
2
  import { Book } from '../../shared/book';
3
 
4
  @Component({
@@ -8,10 +11,12 @@ import { Book } from '../../shared/book';
8
  styleUrl: './book-details.component.css'
9
  })
10
  export class BookDetailsComponent {
11
- @Input() book?: Book;
12
- @Output() leave = new EventEmitter<void>();
13
-
14
- doLeave() {
15
- this.leave.emit();
 
 
16
  }
17
  }
1
+ import { Component } from '@angular/core';
2
+ import { ActivatedRoute } from '@angular/router';
3
+
4
+ import { BookStoreService } from '../../shared/book-store.service';
5
  import { Book } from '../../shared/book';
6
 
7
  @Component({
11
  styleUrl: './book-details.component.css'
12
  })
13
  export class BookDetailsComponent {
14
+ book?: Book;
15
+ constructor(
16
+ private service: BookStoreService,
17
+ private route: ActivatedRoute,
18
+ ) {
19
+ const isbn = this.route.snapshot.paramMap.get('isbn')!;
20
+ this.book = this.service.getSingle(isbn);
21
  }
22
  }
src/app/books/book-list/book-list.component.html CHANGED
@@ -1,7 +1,7 @@
1
  <h1>Books</h1>
2
  <ul class="book-list">
3
  <li *ngFor="let book of books">
4
- <bm-book-list-item [book]="book" (click)="doSelect(book)"></bm-book-list-item>
5
  </li>
6
  <li *ngIf="!books.length">
7
  No books available.
1
  <h1>Books</h1>
2
  <ul class="book-list">
3
  <li *ngFor="let book of books">
4
+ <bm-book-list-item [book]="book"></bm-book-list-item>
5
  </li>
6
  <li *ngIf="!books.length">
7
  No books available.
src/app/books/book-list/book-list.component.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Component, EventEmitter, Output } from '@angular/core';
2
 
3
  import { BookStoreService } from '../../shared/book-store.service';
4
  import { Book } from '../../shared/book';
@@ -11,13 +11,8 @@ import { Book } from '../../shared/book';
11
  })
12
  export class BookListComponent {
13
  books: Book[] = [];
14
- @Output() selectBook = new EventEmitter<Book>();
15
 
16
  constructor(private service: BookStoreService) {
17
  this.books = this.service.getAll();
18
  }
19
-
20
- doSelect(book: Book) {
21
- this.selectBook.emit(book);
22
- }
23
  }
1
+ import { Component } from '@angular/core';
2
 
3
  import { BookStoreService } from '../../shared/book-store.service';
4
  import { Book } from '../../shared/book';
11
  })
12
  export class BookListComponent {
13
  books: Book[] = [];
 
14
 
15
  constructor(private service: BookStoreService) {
16
  this.books = this.service.getAll();
17
  }
 
 
 
 
18
  }
src/app/books/book-list-item/book-list-item.component.html CHANGED
@@ -1,4 +1,4 @@
1
- <div *ngIf="book" class="list-item">
2
  <img *ngIf="book.thumbnailUrl" [src]="book.thumbnailUrl" alt="Cover">
3
  <h2>{{ book.title }}</h2>
4
  <p role="doc-subtitle" *ngIf="book.subtitle">
@@ -10,4 +10,4 @@
10
  </li>
11
  </ul>
12
  <div>ISBN {{ book.isbn }}</div>
13
- </div>
1
+ <a *ngIf="book" [routerLink]="book.isbn" class="list-item">
2
  <img *ngIf="book.thumbnailUrl" [src]="book.thumbnailUrl" alt="Cover">
3
  <h2>{{ book.title }}</h2>
4
  <p role="doc-subtitle" *ngIf="book.subtitle">
10
  </li>
11
  </ul>
12
  <div>ISBN {{ book.isbn }}</div>
13
+ </a>
src/app/books/books-routing.module.ts CHANGED
@@ -1,7 +1,19 @@
1
  import { NgModule } from '@angular/core';
2
  import { RouterModule, Routes } from '@angular/router';
3
 
4
- const routes: Routes = [];
 
 
 
 
 
 
 
 
 
 
 
 
5
 
6
  @NgModule({
7
  imports: [RouterModule.forChild(routes)],
1
  import { NgModule } from '@angular/core';
2
  import { RouterModule, Routes } from '@angular/router';
3
 
4
+ import { BookDetailsComponent } from './book-details/book-details.component';
5
+ import { BookListComponent } from './book-list/book-list.component';
6
+
7
+ const routes: Routes = [
8
+ {
9
+ path: 'books',
10
+ component: BookListComponent,
11
+ },
12
+ {
13
+ path: 'books/:isbn',
14
+ component: BookDetailsComponent,
15
+ }
16
+ ];
17
 
18
  @NgModule({
19
  imports: [RouterModule.forChild(routes)],
src/app/books/books.module.ts CHANGED
@@ -15,10 +15,6 @@ import { BookDetailsComponent } from './book-details/book-details.component';
15
  imports: [
16
  CommonModule,
17
  BooksRoutingModule
18
- ],
19
- exports: [
20
- BookListComponent,
21
- BookDetailsComponent
22
  ]
23
  })
24
  export class BooksModule { }
15
  imports: [
16
  CommonModule,
17
  BooksRoutingModule
 
 
 
 
18
  ]
19
  })
20
  export class BooksModule { }
src/app/home/home.component.html ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
1
+ <h1>Home</h1>
2
+
3
+ <a routerLink="/books" class="button red">
4
+ Show book list
5
+ </a>
src/app/home/home.component.ts ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
1
+ import { Component } from '@angular/core';
2
+
3
+ @Component({
4
+ selector: 'bm-home',
5
+ templateUrl: './home.component.html',
6
+ standalone: false,
7
+ styleUrl: './home.component.css'
8
+ })
9
+ export class HomeComponent {}
src/app/shared/book-store.service.ts CHANGED
@@ -34,4 +34,8 @@ export class BookStoreService {
34
  getAll(): Book[] {
35
  return this.books;
36
  }
 
 
 
 
37
  }
34
  getAll(): Book[] {
35
  return this.books;
36
  }
37
+
38
+ getSingle(isbn: string): Book | undefined {
39
+ return this.books.find(book => book.isbn === isbn);
40
+ }
41
  }