在 Angular 中处理大量可选参数的最佳方式

Question

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

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

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

    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);
    }

Answer 1

我对此的看法是

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

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

Answer 2

您有多种选择：

1) 您可以为每个参数定义一个具有属性的对象。那么你的代码只需要assign/retrieve一个对象。

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

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

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

在 Angular 中处理大量可选参数的最佳方式

Best way to handle lots of optional paramaters in Angular

parameters

angular

angular-router