Clarity 可重复使用的布尔过滤器

Question

我有一个可以包含多个布尔过滤器的网格，我想为它创建一个可重复使用的过滤器。

以下示例允许我按首都和非首都过滤城市：

import { Component } from '@angular/core';
import { ClrDatagridFilterInterface } from '@clr/angular';
import { Subject } from 'rxjs';

@Component({
    selector: 'app-boolean-filter',
    template: `
        <clr-checkbox [(clrChecked)]="trueChecked" (clrCheckedChange)="onCheckedTrue($event)" [clrAriaLabeledBy]="'Yes'">
            Yes
        </clr-checkbox>
        <clr-checkbox [(clrChecked)]="falseChecked" (clrCheckedChange)="onCheckedFalse($event)" [clrAriaLabeledBy]="'No'">
            No
        </clr-checkbox>
        `
})
export class BooleanFilterComponent implements ClrDatagridFilterInterface<any> {
    trueChecked = true;
    falseChecked = true;

    changes = new Subject<any>();

    isActive(): boolean {
        return true;
    }

    accepts(value: any) {
        const { capital } = value;

        return (capital && this.trueChecked) || (!capital && this.falseChecked);
    }

    onCheckedTrue(value: any) {
        this.changes.next();
    }

    onCheckedFalse(value: any) {
        this.changes.next();
    }
}

这就是我使用它的方式：

<clr-dg-column [clrDgField]="'capital'">
    Capital
    <clr-dg-filter [clrDgFilter]="capitalFilter" >
        <app-boolean-filter #capitalFilter class="boolean-filter"></app-boolean-filter>
    </clr-dg-filter>
</clr-dg-column>

然而，这并不是真正可重用的，因为我的过滤器组件依赖于 city.capital 列，如果我想要另一个布尔过滤器，我必须重用它。

我无法从文档中了解如何制作独立于网格中实际内容的自定义和可重用过滤器，并且想知道这是如何实现的。

我目前的尝试 Stackblitz。

Answer 1

你已经很接近了，你真正需要的只是一个输入来接受属性检查并使其可重用。

因此，将 @Input() prop: string; 这样的输入添加到您的 BooleanFilterComponent，然后在您的 accepts() 方法中，您可以像这样引用它：

accepts(value: City) {
  const state = value[this.prop]; // Note: this only works for top level properties
  return (state && this.trueChecked) || (!state && this.falseChecked);
}

然后您只需将属性的名称传递给过滤器组件，如下所示：

<app-boolean-filter prop="capital" #capitalFilter class="boolean-filter"></app-boolean-filter>

查看您的 stackblitz 使用这些更改：https://stackblitz.com/edit/angular-dqumyb?file=src%2Fapp%2Fapp.component.html。

Clarity 可重复使用的布尔过滤器

Clarity reusable Boolean filter

angular

vmware-clarity