能否通过Angular CLI在同一视图中同时展示列表与选中项详情组件？

当然可以啦！这其实是Angular开发里非常常见的场景，用Angular CLI完全能轻松实现。我给你拆解下具体的实现思路和步骤：

1. 用Angular CLI生成两个组件 #

首先打开终端，用CLI命令快速创建列表组件和详情组件：

# 生成书籍列表组件
ng generate component book-list
# 生成书籍详情组件
ng generate component book-detail
# 或者用简写形式
ng g c book-list
ng g c book-detail

2. 在父组件中整合两个子组件 #

我们可以把AppComponent作为父容器，在它的模板里同时引入两个子组件，并用Flex/Grid实现左右布局：

<!-- app.component.html -->
<div class="book-container" style="display: flex; gap: 2rem; padding: 2rem;">
  <!-- 列表组件 -->
  <app-book-list (bookSelected)="onBookSelected($event)"></app-book-list>
  <!-- 详情组件 -->
  <app-book-detail [selectedBook]="currentBook"></app-book-detail>
</div>

3. 实现组件间的通信 #

要完成“点击列表条目展示详情”的功能，需要通过子传父+父传子的方式传递数据：

列表组件（BookListComponent）：子传父 #

在列表组件里定义一个输出属性，把选中的书籍数据传给父组件：

// book-list.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
import { Book } from '../models/book.model';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent {
  // 模拟店内书籍数据
  books: Book[] = [
    { id: 1, title: 'Angular实战指南', price: 89, publishYear: 2023 },
    { id: 2, title: 'TypeScript从入门到精通', price: 59, publishYear: 2022 },
    { id: 3, title: '前端工程化实践', price: 79, publishYear: 2024 }
  ];

  // 定义输出事件，用于传递选中的书籍
  @Output() bookSelected = new EventEmitter<Book>();

  // 点击书籍条目时触发事件
  onSelectBook(book: Book) {
    this.bookSelected.emit(book);
  }
}

对应的列表模板：

<!-- book-list.component.html -->
<h3>店内书籍列表</h3>
<ul style="list-style: none; padding: 0;">
  <li *ngFor="let book of books" 
      style="padding: 0.8rem; border: 1px solid #eee; margin-bottom: 0.5rem; cursor: pointer;"
      (click)="onSelectBook(book)">
    {{ book.title }}
  </li>
</ul>

父组件（AppComponent）：中转数据 #

父组件接收列表组件传来的书籍数据，再传递给详情组件：

// app.component.ts
import { Component } from '@angular/core';
import { Book } from './models/book.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentBook: Book | undefined;

  // 接收列表组件传来的选中书籍
  onBookSelected(book: Book) {
    this.currentBook = book;
  }
}

详情组件（BookDetailComponent）：父传子 #

详情组件通过输入属性接收父组件传来的书籍数据，展示详情：

// book-detail.component.ts
import { Component, Input } from '@angular/core';
import { Book } from '../models/book.model';

@Component({
  selector: 'app-book-detail',
  templateUrl: './book-detail.component.html',
  styleUrls: ['./book-detail.component.css']
})
export class BookDetailComponent {
  // 定义输入属性，接收选中的书籍
  @Input() selectedBook: Book | undefined;
}

对应的详情模板：

<!-- book-detail.component.html -->
<h3>书籍详情</h3>
<div *ngIf="selectedBook" style="padding: 1rem; border: 1px solid #eee; min-width: 250px;">
  <p><strong>书名：</strong>{{ selectedBook.title }}</p>
  <p><strong>价格：</strong>{{ selectedBook.price }}元</p>
  <p><strong>出版年份：</strong>{{ selectedBook.publishYear }}</p>
</div>
<div *ngIf="!selectedBook" style="padding: 1rem; border: 1px solid #eee; min-width: 250px;">
  请选择一本书查看详情
</div>

4. 定义书籍数据模型 #

最后别忘了创建一个Book接口来规范数据结构，在src/app/models/book.model.ts中：

export interface Book {
  id: number;
  title: string;
  price: number;
  publishYear: number;
}

这样一套流程走下来，你就能实现“左侧列表选书，右侧实时展示详情”的功能了，启动项目后点击列表里的书籍就能看到效果~

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