Angular 4主从组件问题：点击列表项仅展示对应子组件数据

咱们先理清楚问题根源：现在点击任意列表项都展示整个数组数据，是因为没有跟踪用户选中的单本书籍，子组件大概率绑定的是整个书籍数组而非单个选中项。接下来一步步调整就能解决：

步骤1：在父组件中添加选中状态管理 #

先在父组件的TypeScript代码里，新增一个变量存储选中的书籍，再写个处理点击事件的方法：

export class BookListComponent {
  myBooks: any[]; // 你的原有书籍数组
  selectedBook: any; // 新增：存储当前选中的书籍

  // 处理书籍点击的方法，把点击的书籍传进来赋值
  handleBookClick(book: any) {
    this.selectedBook = book;
  }
}

步骤2：修改父组件HTML模板，绑定点击事件 #

给每个<li>添加点击事件，把当前循环的book作为参数传进去，还可以给选中项加个样式方便视觉区分（可选）：

<ul>
  <li 
    *ngFor="let book of myBooks; let i = index"
    (click)="handleBookClick(book)"
    [class.selected]="selectedBook?.id === book.id"
  >
    Book ID: {{book.id}} - {{book.title}} <!-- 这里可以根据你的书籍字段调整显示内容 -->
  </li>
</ul>

<!-- 放置你的子组件，把选中的书籍传递进去 -->
<app-book-detail [selectedBook]="selectedBook"></app-book-detail>

步骤3：子组件配置输入属性接收数据 #

确保子组件能接收父组件传过来的单本书籍，需要定义一个@Input()属性：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-book-detail',
  templateUrl: './book-detail.component.html'
})
export class BookDetailComponent {
  @Input() selectedBook: any; // 接收父组件传递的选中书籍
}

步骤4：子组件模板展示单本书籍数据 #

在子组件的HTML里，基于传入的selectedBook展示对应内容，记得加空值判断避免初始状态报错：

<div *ngIf="selectedBook">
  <h4>书籍详情</h4>
  <p>ID：{{selectedBook.id}}</p>
  <p>书名：{{selectedBook.title}}</p>
  <p>作者：{{selectedBook.author}}</p>
  <!-- 其他你需要展示的书籍字段 -->
</div>
<div *ngIf="!selectedBook">
  请选择一本书查看详情
</div>

这样调整后，点击哪个列表项，子组件就只会展示那本书的对应数据啦～

内容的提问来源于stack exchange，提问作者Menahem Gil