嘿，这个需求在Angular里用ngTemplateOutlet就能完美搞定！我来给你一步步拆解，附上可直接复用的代码示例：

本质上就是利用Angular的ngTemplateOutlet指令，动态指定要渲染的模板，并通过ngTemplateOutletContext把对应分类的属性数据传递给模板，实现“分类-模板-属性”的绑定。同时结合展开/折叠的状态管理，就能完成动态面板的效果。

1. 组件类中定义分类配置 #

首先在你的组件.ts文件里，定义每个分类的信息，包括模板标识、面板标题、要传递的属性，还有展开状态：

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

@Component({
  selector: 'app-expandable-panels',
  templateUrl: './expandable-panels.component.html',
  styleUrls: ['./expandable-panels.component.css']
})
export class ExpandablePanelsComponent {
  // 分类配置：每个分类对应一个模板和属性
  categoryConfigs = [
    {
      id: 'user',
      title: '用户信息',
      templateKey: 'userTemplate',
      isExpanded: false,
      props: {
        name: '张三',
        age: 28,
        email: 'zhangsan@example.com'
      }
    },
    {
      id: 'product',
      title: '产品详情',
      templateKey: 'productTemplate',
      isExpanded: false,
      props: {
        productName: 'Angular实战指南',
        price: 89,
        stock: 100
      }
    },
    {
      id: 'order',
      title: '订单记录',
      templateKey: 'orderTemplate',
      isExpanded: false,
      props: {
        orderId: 'OD20240501001',
        createTime: '2024-05-01',
        status: '已完成'
      }
    }
  ];

  // 切换面板展开状态
  togglePanel(category: any) {
    category.isExpanded = !category.isExpanded;
  }
}

2. 模板中定义分类对应的ngTemplate并动态渲染 #

在组件的.html文件里，先定义每个分类对应的模板（用ng-template，并指定模板变量），然后用*ngFor遍历分类配置，动态加载模板并传递属性：

<div class="panel-container">
  <!-- 遍历所有分类面板 -->
  <div *ngFor="let category of categoryConfigs" class="panel">
    <!-- 面板头部：点击切换展开状态 -->
    <div class="panel-header" (click)="togglePanel(category)">
      <span>{{ category.title }}</span>
      <span>{{ category.isExpanded ? '▼' : '▶' }}</span>
    </div>

    <!-- 动态加载对应模板，传递属性上下文 -->
    <div *ngIf="category.isExpanded" class="panel-content">
      <ng-container 
        [ngTemplateOutlet]="category.templateKey"
        [ngTemplateOutletContext]="{ $implicit: category.props }"
      ></ng-container>
    </div>
  </div>

  <!-- 定义各个分类的模板 -->
  <ng-template #userTemplate let-userProps>
    <div class="template-content">
      <p><strong>姓名：</strong>{{ userProps.name }}</p>
      <p><strong>年龄：</strong>{{ userProps.age }}</p>
      <p><strong>邮箱：</strong>{{ userProps.email }}</p>
    </div>
  </ng-template>

  <ng-template #productTemplate let-productProps>
    <div class="template-content">
      <p><strong>产品名称：</strong>{{ productProps.productName }}</p>
      <p><strong>价格：</strong>¥{{ productProps.price }}</p>
      <p><strong>库存：</strong>{{ productProps.stock }}件</p>
    </div>
  </ng-template>

  <ng-template #orderTemplate let-orderProps>
    <div class="template-content">
      <p><strong>订单ID：</strong>{{ orderProps.orderId }}</p>
      <p><strong>创建时间：</strong>{{ orderProps.createTime }}</p>
      <p><strong>订单状态：</strong>{{ orderProps.status }}</p>
    </div>
  </ng-template>
</div>

3. 可选：添加基础样式 #

给面板加一些基础样式，让展开/折叠效果更直观：

.panel-container {
  max-width: 600px;
  margin: 20px auto;
}

.panel {
  border: 1px solid #eee;
  margin-bottom: 10px;
  border-radius: 4px;
}

.panel-header {
  padding: 12px 16px;
  background-color: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-content {
  padding: 16px;
  background-color: #fff;
}

.template-content p {
  margin: 8px 0;
}

• 模板变量（比如#userTemplate）必须和分类配置里的templateKey完全对应，这样ngTemplateOutlet才能正确找到要渲染的模板。
• ngTemplateOutletContext里的$implicit是默认的上下文变量，模板里可以用let-xxx来接收；如果你需要传递多个独立变量，也可以写成{ props: category.props, otherData: xxx }，然后模板里用let-props="props"接收。
• 如果多个分类的模板结构类似，也可以把模板抽成单独的组件，然后在ng-template里引用组件，这样代码复用性更好。

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