Angular商品目录多状态切换逻辑实现求助

先在products.component.ts里定义状态变量和处理逻辑：

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

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent {
  // 示例商品数据，可根据实际业务调整结构
  products = [
    { id: 1, name: '商品1', category: '数码' },
    { id: 2, name: '商品2', category: '服饰' },
    { id: 3, name: '商品3', category: '数码' },
    // ...更多商品数据
  ];
  categories = ['数码', '服饰', '家居']; // 你的分类列表

  currentCategory: string | null = null; // 当前选中分类，null代表未选中
  showAllToggle = false; // 全部商品开关状态

  // 点击分类触发
  selectCategory(category: string) {
    this.currentCategory = category;
    this.showAllToggle = false; // 选中分类时自动关闭全部展示开关
  }

  // 返回分类列表
  backToCategories() {
    this.currentCategory = null;
    this.showAllToggle = false; // 回到初始状态
  }

  // 切换全部展示/初始视图
  toggleShowAll() {
    this.showAllToggle = !this.showAllToggle;
    this.currentCategory = null; // 切换时清空选中分类
  }

  // 获取当前需要展示的商品列表
  getDisplayProducts() {
    if (this.showAllToggle) {
      return this.products;
    }
    if (this.currentCategory) {
      return this.products.filter(item => item.category === this.currentCategory);
    }
    return []; // 初始状态下不展示商品，可根据需求调整
  }
}

然后是products.component.html的模板控制：

<!-- 初始视图：显示分类和切换开关 -->
<div *ngIf="!currentCategory && !showAllToggle">
  <div class="category-container">
    <h3>商品分类</h3>
    <div *ngFor="let category of categories" (click)="selectCategory(category)" class="category-item">
      {{ category }}
    </div>
  </div>

  <button (click)="toggleShowAll()" class="toggle-btn">展示全部商品</button>
</div>

<!-- 返回分类链接：仅在选中分类时显示 -->
<div *ngIf="currentCategory">
  <span (click)="backToCategories()" class="back-link">返回分类</span>
</div>

<!-- 全部商品视图：仅在开关打开时显示 -->
<div *ngIf="showAllToggle">
  <h3>全部商品</h3>
  <button (click)="toggleShowAll()" class="toggle-btn">返回分类视图</button>
  <div *ngFor="let product of getDisplayProducts()" class="product-item">
    {{ product.name }} - {{ product.category }}
  </div>
</div>

<!-- 选中分类后的商品列表 -->
<div *ngIf="currentCategory && !showAllToggle">
  <h3>{{ currentCategory }} 商品</h3>
  <div *ngFor="let product of getDisplayProducts()" class="product-item">
    {{ product.name }}
  </div>
</div>

逻辑说明 #

• 用currentCategory和showAllToggle两个状态变量控制不同视图的显示，确保状态互斥（选中分类时自动关闭全部展示，切换全部展示时自动清空选中分类）
• 通过getDisplayProducts()统一处理商品数据过滤，避免在模板中写复杂逻辑
• 所有视图切换都通过修改组件状态实现，符合Angular的单向数据流逻辑

推荐搜索关键词 #

• Angular ngIf conditional rendering
• Angular component state management for UI toggles
• Angular product catalog category filtering logic
• Angular toggle view visibility with component variables

内容的提问来源于stack exchange，提问作者Олег Дрогуль