PrimeNG p-tree：如何判断过滤器状态及数据变更后重新过滤？

问题1：判断过滤器是否处于启用状态（输入框有内容） #

PrimeNG的p-tree实例内置了filterInput属性，指向过滤器的输入框DOM元素。通过读取该元素的value值，即可判断过滤器是否处于激活状态：

// 在组件类中实现判断方法
isFilterActive(): boolean {
  // 用可选链避免未初始化时的报错，trim排除纯空格的情况
  return this.tree?.filterInput?.nativeElement?.value?.trim() !== '';
}

调用这个方法就能知道当前过滤器输入框是否有有效内容。

问题2：数据变更时触发重新过滤操作 #

当p-tree绑定的nodes数据更新后，直接调用树实例的filter()方法，并传入当前过滤器的输入值，即可触发重新过滤：

方式一：数据更新后手动触发 #

// 假设updatedNodes是更新后的树节点数据
this.nodes = updatedNodes;

// 获取当前过滤器输入值并触发过滤
const currentFilterValue = this.tree.filterInput.nativeElement.value;
this.tree.filter(currentFilterValue);

方式二：监听数据变化自动触发 #

如果需要在nodes每次变更时自动执行过滤，可以通过ngOnChanges钩子监听：

import { SimpleChanges, OnChanges } from '@angular/core';

// 组件类实现OnChanges接口
export class YourComponent implements OnChanges {
  // ...其他代码

  ngOnChanges(changes: SimpleChanges) {
    // 当nodes数据变更且不是首次初始化时
    if (changes['nodes'] && !changes['nodes'].firstChange) {
      const currentFilterValue = this.tree?.filterInput?.nativeElement?.value;
      if (currentFilterValue) {
        this.tree.filter(currentFilterValue);
      }
    }
  }
}

这样只要nodes数据发生更新，就会自动重新应用当前的过滤条件。

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