在Angular中设置uri queryParams时减少代码的一种优雅方法？

Question

我有一个在角度服务中设置端点的方法，由于查询参数有3或4个元素，因此行越来越长。

是否有更优雅的方式进行设置？

private endpoint = (
    var1: Type1,
    var2: Type2,
    var3: Type3
  ) => {
    let uri = `path?query1=${var1}&query2=${var2}&draft=true&query3=${var3}`;
    return uri;
  };

我认为应该有一个更好的方法来编写此代码，如果我需要进一步扩展它，它会更快吗？我找不到任何可以在线帮助我的地方。

有人有什么想法吗？

Answer 1

就我而言，我已经创建了一个单独的服务来处理此类问题，例如：

@Injectable({
    providedIn: 'root'
})
export class SharedHttpService {

    /**
     * Function transforms the given object's properties into a string of GET params;
     * This function will omit properties that are undefined;
     * @param criteria - object representing fields that can be undefined or not.
     */
    transformCriteria(criteria: Criteria | NonPagedCriteria): String {
        if (!criteria) {
            return '';
        }

        let criteriaString = '?';
        for (const key of Object.keys(criteria)) {
            if (criteria[key] === undefined || criteria[key] === null || criteria[key].length === 0 || key === 'sort') {
                continue;
            }
            if (criteriaString !== '?') {
                criteriaString += '&';
            }
            criteriaString += key + '=' + criteria[key];
        }
        if (criteria.sort && criteria.sort.direction) {
            const sort = {...criteria.sort};
            criteriaString += `&sort=${sort.paramName},${sort.direction}`;
        }

        return criteriaString;
    }
}

请注意，Criteria和NonPagedCriteria是自定义接口，它们由传递给http服务的对象扩展，并被视为应出现在URL中的一组参数。

Answer 2

尝试将参数设置为数组：

endpoint = params => {
      let uri ='path?';
      params.forEach((element, ind) => {
          uri += `query${++ind}=${element}&`;
      });
      return uri;
  }

  console.log(endpoint(['first','second','third']))