Clarity表格行展开器：能否通过自定义函数控制详情展开并传递EventEmitter？

当然可以通过自定义函数控制Clarity表格的详情面板展开！另外关于事件交互的需求，我们也有很清晰的实现方式，下面我给你一步步拆解：

一、用自定义函数手动控制详情面板的展开/收起 #

Clarity的clr-dg-row组件提供了[(clrDgExpanded)]双向绑定属性，我们只需要给每一行绑定一个布尔值变量，然后在自定义函数里修改这个变量，就能精准控制对应行的详情面板状态。

直接上手的代码示例： #

HTML模板部分：

<clr-datagrid>
  <clr-dg-column>Artifact</clr-dg-column>
  <clr-dg-column>Category</clr-dg-column>
  <clr-dg-column>Action</clr-dg-column>

  <!-- 遍历数据，给每行绑定展开状态变量 -->
  <clr-dg-row *clrDgItems="let item of dataList" [(clrDgExpanded)]="item.isExpanded">
    <clr-dg-cell>{{item.artifact}}</clr-dg-cell>
    <clr-dg-cell>{{item.category}}</clr-dg-cell>
    <clr-dg-cell>
      <!-- 自定义按钮触发切换逻辑 -->
      <button class="btn btn-sm btn-primary" (click)="toggleDetail(item)">
        {{item.isExpanded ? '收起详情' : '展开详情'}}
      </button>
    </clr-dg-cell>

    <!-- 详情面板，只有当isExpanded为true时显示 -->
    <clr-dg-row-detail *clrIfExpanded>
      <div class="p-4">
        <h5>{{item.artifact}} 详情内容</h5>
        <p>分类：{{item.category}}</p>
        <p>额外信息：{{item.extraInfo}}</p>
        <!-- 详情面板内也可以触发自定义事件 -->
        <button class="btn btn-sm btn-secondary mt-2" (click)="doDetailAction(item)">
          执行详情操作
        </button>
      </div>
    </clr-dg-row-detail>
  </clr-dg-row>
</clr-datagrid>

TypeScript组件类部分：

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

// 定义数据结构，包含展开状态字段
interface DataItem {
  artifact: string;
  category: string;
  extraInfo: string;
  isExpanded: boolean;
}

@Component({
  selector: 'app-clarity-grid-demo',
  templateUrl: './clarity-grid-demo.component.html'
})
export class ClarityGridDemoComponent {
  // 模拟数据源
  dataList: DataItem[] = [
    { artifact: 'AAA', category: '111', extraInfo: '这是AAA的详情描述', isExpanded: false },
    { artifact: 'BBB', category: '222', extraInfo: '这是BBB的详情描述', isExpanded: false },
    { artifact: 'CCC', category: '333', extraInfo: '这是CCC的详情描述', isExpanded: false }
  ];

  // 自定义切换详情面板的函数
  toggleDetail(item: DataItem) {
    item.isExpanded = !item.isExpanded;
    // 如果需要在展开时加载数据，可以在这里加逻辑
    if (item.isExpanded) {
      this.loadDetailData(item);
    }
  }

  // 模拟加载详情数据的函数
  loadDetailData(item: DataItem) {
    console.log(`正在加载${item.artifact}的详情数据...`);
    // 实际场景中可以调用API获取数据后更新item的extraInfo
  }

  // 处理详情面板内的操作事件
  doDetailAction(item: DataItem) {
    console.log(`对${item.artifact}执行了详情操作`);
    // 这里可以添加你的业务逻辑，比如弹窗、请求接口等
  }
}

二、关于向<clr-dg-row-detail>传递EventEmitter的说明 #

其实不需要直接给<clr-dg-row-detail>传递EventEmitter，我们可以通过Angular的组件交互机制轻松实现事件传递：

情况1：详情内容在当前组件内 #

就像上面的示例那样，直接在详情面板的元素上绑定父组件的函数即可，点击时会直接触发父组件的逻辑，非常直观。

情况2：详情内容是独立子组件 #

如果你的详情面板是一个单独的组件，那可以在子组件中定义@Output()装饰的EventEmitter，然后在父组件中监听这个事件：

子组件（item-detail.component.ts）：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DataItem } from '../clarity-grid-demo.component';

@Component({
  selector: 'app-item-detail',
  template: `
    <div class="p-4">
      <h5>{{item.artifact}} 详情</h5>
      <p>分类：{{item.category}}</p>
      <button class="btn btn-sm btn-secondary mt-2" (click)="actionTriggered.emit(item)">
        通知父组件执行操作
      </button>
    </div>
  `
})
export class ItemDetailComponent {
  @Input() item: DataItem;
  // 定义EventEmitter，用于向父组件传递事件
  @Output() actionTriggered = new EventEmitter<DataItem>();
}

父组件模板中使用子组件：

<clr-dg-row *clrDgItems="let item of dataList" [(clrDgExpanded)]="item.isExpanded">
  <!-- 省略其他单元格 -->
  <clr-dg-row-detail *clrIfExpanded>
    <!-- 引入子组件，绑定输入属性和输出事件 -->
    <app-item-detail [item]="item" (actionTriggered)="handleDetailAction($event)"></app-item-detail>
  </clr-dg-row-detail>
</clr-dg-row>

父组件中的事件处理函数：

handleDetailAction(item: DataItem) {
  console.log(`收到子组件的事件，处理${item.artifact}的操作`);
  // 这里可以添加父组件的业务逻辑
}

核心要点回顾 #

• 利用[(clrDgExpanded)]双向绑定，就能通过自定义函数完全控制详情面板的展开状态。
• 事件交互不需要直接给<clr-dg-row-detail>传EventEmitter，通过Angular的原生事件绑定或子组件@Output就能轻松实现。
• 如果需要懒加载详情数据，可以在切换展开状态的函数中加入数据加载逻辑。

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