Question

我有SearchFilter

的课程

class SearchFilter { 
   constructor(bucket: string,
               pin: number,
               qty: number,
               category: string) {
   }
}

当用户点击搜索时，我正在填充矩阵参数的过滤器。

router.navigate(['filter', searchFilter]); //searchFilter is an instance

网址类似于

filter;bucket=MPC123;category=JOINT;qty=90;pin=9087

这是在 param 映射回Object类型SearchFilter的其他组件中使用的。但据我所知，这里需要明确设置数据类型。

   const params = this.activatedRoute.snapshot.params;
   const filter = this.getFilterFromParams(params);

   getFilterFromParams(params) :SearchFilter {
      const filter = new SearchFilter();
      Object.keys(params).forEach((key) => {
         switch(key) {
             case 'pin':
             case 'qty': filter[key] = Number(params[key]); break;
             default: filter[key] = params[key];
         }
      });
      return filter;
   }

从上面的代码可以看出，为了将params映射回Object，我们编写了一个自定义映射函数，问题是，是否还有其他明显的方法可以做到这一点，还是这是一个常见的模式？

我必须依赖网址，因为用户应该能够共享不同过滤器的网址。

Answer 1

您可以使用Object.assign和扩展语法的功能：

getFilterFromParams(params) :SearchFilter {
    return Object.assign(new SearchFilter(), params,
        ...['pin', 'qty'].map(key => key in params && { [key]: Number(params[key]) })
    );
}

Answer 2

添加静态工厂方法可行：

class SearchFilter { 
  constructor(
    bucket: string,
    pin: number,
    qty: number,
    category: string) {
  }

  public static fromParams({ bucket, pin, qty, category }) {
    // TODO Add validation to ensure pin & qty are integers
    return new SearchFilter(
      bucket,
      parseInt(pin),
      parseInt(qty),
      category);
  }
}

然后我们可以像这样使用它：

const demoParams = {
  bucket: "MPC123",
  category: "JOINT",
  qty: "90",
  pin: "9087"
};

const filter = SearchFilter.fromParams(demoParams);

JavaScript / TypeScript / Angular4中的对象URL映射

2 个答案: