nz-tree 检索 高亮

nz-tree组件是一个树形控件，用于在HTML页面中显示树状结构的数据。要实现nz-tree的检索高亮功能，可以按照以下步骤进行操作:

1. 首先，在HTML文件中引入nz-tree组件，并使用适当的属性绑定数据源。

2. 然后，通过设置nz-tree组件的nzSearchValue属性，将要搜索的关键词传递给组件。

3. 在组件中，可以使用Angular的管道过滤器或自定义方法来实现检索功能。可以遍历树的节点，将匹配到的节点标记为高亮。

4. 可以使用CSS样式来设置高亮效果，如设置背景颜色或字体颜色等。

下面是一个示例代码，演示如何在nz-tree中实现检索高亮功能：

<tree-root [nodes]="treeData" [(state)]="treeState"></tree-root>

// 在组件的代码中，可以使用以下方式实现检索高亮功能
treeData = [
  {
    name: '节点1',
    children: [
      {
        name: '子节点1'
      },
      {
        name: '子节点2'
      }
    ]
  },
  {
    name: '节点2',
    children: [
      {
        name: '子节点3'
      },
      {
        name: '子节点4'
      }
    ]
  }
];

treeState = {};

searchValue = '';

highlightNodes() {
  if (this.searchValue) {
    this.treeData.forEach(node => {
      if (node.name.includes(this.searchValue)) {
        this.treeState[node.name] = true;
      } else {
        this.treeState[node.name] = false;
      }
      if (node.children) {
        this.highlightChildren(node.children);
      }
    });
  } else {
    this.treeState = {};
  }
}

highlightChildren(children) {
  children.forEach(child => {
    if (child.name.includes(this.searchValue)) {
      this.treeState[child.name] = true;
    } else {
      this.treeState[child.name] = false;
    }
    if (child.children) {
      this.highlightChildren(child.children);
    }
  });
}