1

我有一个 Angular 4 组件，它根据用户选择的过滤器选项显示数据。我想将过滤器选项保存为 url 中的参数，类似于 kibana。

我想知道处理所有这些可选参数的最佳方法是什么。我在示例中拥有的 6 个过滤器选项远不止这些，它使代码有点笨拙。

目前我正在订阅 route.params 并使用 if 语句搜索每一个。要创建和导航我订阅事件发射器的 url，检查自定义参数类的值。这是它的外观示例

    this.route.params.subscribe((params: Params) => {
        if (params["filter1"]) this.params.filter1 = params["filter1"];
        if (params["filter2"]) this.params.filter2 = params["filter2"];
        if (params["filter3"]) this.params.filter3 = params["filter3"];
        if (params["filter4"]) this.params.filter4 = params["filter4"];
        if (params["filter5"]) this.params.filter5 = params["filter5"];
        if (params["filter6"]) this.params.filter6 = params["filter6"];
    });


    this.refreshParams.subscribe((params) => {
        let url = {};

        if (params.filter1) url["filter1"] = params.filter1;
        if (params.filter2) url["filter2"] = params.filter2;
        if (params.filter1) url["filter3"] = params.filter3;
        if (params.filter1) url["filter4"] = params.filter4;
        if (params.filter1) url["filter5"] = params.filter5;
        if (params.filter1) url["filter6"] = params.filter6;
        this.router.navigate(['/filters', url]);
    });

    selectFilter(filter1: Filter) {
       if (filter1) {
           this.params.filter1 = filter1;
       } else {
           this.params.filter1 = undefined;
       }
       this.refreshParams.next(this.params);
    }
4

2 回答 2

2

你有几个选择：

1）您可以为每个参数定义一个具有属性的对象。然后您的代码只需要分配/检索一个对象。

let filters = {filter1:5,filter2:"Joe"};
this._router.navigate(['/products', {filter: JSON.stringify(filters)}]);

我的硬编码数据可以替换为用户输入的值。

2）您可以为每个过滤器定义一个具有属性的服务。该服务是单例的，因此一个组件可以设置属性，另一个组件可以读取属性，而无需通过路由参数。

于 2017-06-28T14:26:05.777 回答
0

我对此的看法是

this.route.params.subscribe((params: Params) => {
    for (let param in params) {
        this.params[param] = params[param];
    }
});

for...in遍历所有键，因此您既可以在数组中设置键，也可以在参数中获取键值。

于 2017-06-28T14:24:18.267 回答