Angular中如何配置treeNodeWrapperTemplate实现树节点多字段组合展示

方案1：直接使用#treeNodeWrapperTemplate自定义模板（推荐） #

自定义模板优先级高于默认displayField渲染逻辑，无需改动原有配置规则，直接拿到完整节点数据拼接即可：

• 组件模板中编写插槽逻辑

<tree-root [nodes]="treeNodes" [options]="options">
  <!-- 节点包装模板，let-node 可获取当前节点完整数据 -->
  <ng-template #treeNodeWrapperTemplate let-node>
    <span>{{ node.data.column1 }}({{ node.data.column2 }})</span>
  </ng-template>
</tree-root>

说明：node.data为你绑定的原始数据源对象，可直接读取任意字段进行拼接、格式化操作，原有单个displayField配置可直接忽略。

方案2：改造displayField支持函数传入（适合多场景复用） #

如果不想重复编写模板逻辑，可改造原有配置的解析规则，让displayField支持传入自定义格式化函数：

• 配置项修改

options = {
  // 传入函数返回格式化后的展示内容
  displayField: (data) => `${data.column1}(${data.column2})`
}

• 调整树组件内部的字段解析逻辑
  将原有的直接取属性的逻辑，增加函数类型判断，兼容原有单字段模式：

// 树组件内部获取节点展示文本的方法
getNodeDisplayText(node: any): string {
  const displayConfig = this.options.displayField;
  return typeof displayConfig === 'function' 
    ? displayConfig(node.data) 
    : node.data[displayConfig] ?? '';
}

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