Question

我正在使用angular-tree-component（https://angular2-tree.readme.io/）。我想实现过滤器功能，但从文档中我不清楚如何开始在Angular（4）中使用过滤。

如果你有

<tree-root id="tree" [focused]="true" [nodes]="nodes" [options]="options"></tree-root>

并且您希望按文档页面上的字符串进行过滤：

tree.treeModel.filterNodes("text", true);

我想知道如何从我的组件访问树根，然后执行filterNodes（）。

Answer 1

您可以将组件公开为@ViewChild并在组件内访问它。

<tree-root #tree [nodes]="nodes"></tree-root>

在您的组件中执行：

@ViewChild('tree') treeComponent: TreeComponent;

最后，通过调用filterNodes：

在组件上执行搜索

treeComponent.treeModel.filterNodes("text", true);

完整示例：

@Component({
  selector: 'app-root',
  template: `<div style="text-align:center">
              <br/>
              <input [(ngModel)]="filter">
              <button (click)="filterTree()">Filter</button>
              <tree-root #tree [nodes]="nodes"></tree-root>
            </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('tree') treeComponent: TreeComponent;

  filter = '';

  nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' }
      ]
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [
            { id: 7, name: 'subsub' }
          ]
        }
      ]
    }
  ];

  filterTree() {
    this.treeComponent.treeModel.filterNodes(this.filter);
  }
}

在此处查看更多内容：How to invoke methods

在角树组件上使用过滤器

1 个答案: