我想點擊時如何使用 angular？

Question

我是學習這個組件的初學者。 我將嘗試創建一個像這個鏈接https://www.fishpond.com.hk/Books這樣的在線書店，我現在遇到了一些問題。 你們能幫幫我嗎？ 首先在我的網站中，它有后端和前端，現在我可以顯示所有書籍，插入新書，現在我想知道當我點擊書名時我該怎么做以及我必須做什么才能轉移獲取那本書的詳細信息。

如何單擊標題，我將在書籍詳細信息頁面上看到這些書籍詳細信息。 我希望得到 isbn 代碼來找到那本書。

我的代碼在這里 HTML

    <h1>All Books</h1>

<ul *ngIf="books" class="info">
    <li *ngFor="let book of books">
       <p><img [src]="book.image" class="bookimg"></p>
        <a routerLink="/book-detail"><h3>{{ book.title }}</h3></a>
        <p>{{ "By "+ book.author }}</p>
        <span class="price-block" >{{ "HK$" + book.price}}</span>
    </li>
</ul>

ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  h1Style: boolean = false;
  books: Object;

  constructor(private data: DataService) {}

  ngOnInit() {
    this.data.getBooks().subscribe(data=> {
      console.log({data});  //show data
      this.books = data
      //console.log(this.books);
    })
  }

我已經為 book-detail 創建了一個組件

    <h1>Book-detail</h1>
<div *ngIf="books" class="book-detail-block">
  <div *ngFor="let bookrecord of books" class="book-record">
    <h1>{{bookrecord.title}}</h1>
    <p>{{bookrecord.image}}</p>
    <p>{{bookrecord.author}}</p>
    <p>{{bookrecord.price}}</p>
    <p>{{bookrecord.isbn}}</p>
    <p>{{bookrecord.description}}</p>
</div>
</div>

ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-book-detail',
  templateUrl: './book-detail.component.html',
  styleUrls: ['./book-detail.component.scss']
})
export class BookDetailComponent implements OnInit {

  h1Style: boolean = false;
  books: Object;

  constructor(private data: DataService) {}

  ngOnInit() {
    this.data.getOneBook().subscribe(data => {
      this.books = data
      console.log(this.books);
    })
  }

}

我可以在服務中獲取數據，但如何在顯示組件中實現

 export class BookDetailComponent implements OnInit {

  h1Style: boolean = false;
  books: Object;

  constructor(private data: DataService) {}

  ngOnInit() {
    console.log('-0-----' + this.books)
    this.data.getBooks().subscribe(data=> {
      console.log({data});  //show data
      this.books = data
  })

}
}

在此處輸入圖像描述

Answer 1

我可能遲到了這個問題，你已經解決了，但如果你還沒有解決，我希望能提供一些指導。

單擊標題時訪問單個項目所需的內容是在代表標題的標記上使用單擊事件，可能是 h1-標記。 它看起來像這樣：

<h1 (click)="getBookDetail(bookrecord)">{{bookrecord.title}}</h1>

The line above hooks up a clickevent to a function called getBookDetail and takes the individual object as a parameter, as of now this will render an error saying there's no function named getBookDetail(), so you'll need to create it in the component.與視圖對應的 ts 文件可能是 homecomponent.ts，它看起來像這樣：

getBookDetail(book: any) {
   console.log(book);
}

如果您現在重新加載應用程序並單擊標題，您將看到單個圖書對象正在控制台中記錄。 之后您需要設置路由（如果您還沒有設置路由（您在創建項目時會遇到包括 app-routes 模塊的問題）並為 bookDetailComponent 創建路徑。 如果您有路由，請添加一組路由，如下所示：

const routes: Routes = [
  { path: '', redirectTo: '/books', pathMatch: 'full' },
  { path: 'books', component: HomeComponent},
  { path: 'book/:id', component: BookDetailComponent },
];

routes 數組中的第一項將匹配任何空路由，例如 localhost:4200 並重定向到 HomeComponent，另外兩個 arrays 是單個組件的路由。

如果您沒有路由模塊，我建議您按照 angulars 教程添加應用內導航： https://angular.io/tutorial/toh-pt5 。

為了使單擊標題實際上導航到 bookcomponent，您首先需要注入路由器 class，因此如果您將 go 返回到 homecomponent，您將看到一個構造函數（如果沒有創建一個構造函數），請添加路由器 ZA2F2ED4F8EBC2CBB4DC21A29，如：

constructor(private router: Router) {}

在 getBookDetail function 中，您可以刪除 console.log 並添加：

getBookDetail(book: any) {
   // Wrong path this.router.navigateByUrl('/book/' + book.isbn);
      this.router.navigateByUrl('/bookdetail/' + book.isbn);
}

您現在所需要做的就是從 url 獲取 isbn 並獲取具有該標識符的一本書，但我會將這些步驟留給您，您需要的一切都在我之前鏈接的 angular 教程中。 祝你好運，如果有任何令人困惑的地方或您有任何問題，請隨時提出。

添加了一個顯示我的想法的 stackblitz： https://stackblitz.com/edit/angular-ivy-c2znl2?file=src/app/books/books.component.ts