Question

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

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

目前我正在订阅route.params并使用if语句搜索每个。要创建和导航我正在订阅事件发射器的URL，请检查自定义params类的值。这是一个看起来像什么的例子

    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

您有几种选择：

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

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

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

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

Answer 2

我对此的看法是

this.route.params.subscribe((params: Params) => { for (let param in params) { this.params[param] = params[param]; } });遍历所有键，这样您就可以在数组中设置键并获取参数中的键值。

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

2 个答案: