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

我为

SearchFilter

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

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

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

URL看起来像

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

这在另一个组件中使用，参数映射回类型为

SearchFilter

的

对象

。但据我所知，这里需要显式设置数据类型

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

---

从上面的代码中可以看出，要将参数映射回对象，需要编写一个自定义映射函数，问题是，是否有其他明显的方法可以做到这一点，或者这是一种常见的模式？

---

我必须依赖URL，因为用户应该能够共享不同筛选器的URL。

您可以使用

对象的功能。分配
和扩展语法：

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

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

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

添加静态工厂方法将起作用：

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

添加静态工厂方法将起作用：

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

这里有什么问题吗？@JGFMK“问题是，是否有其他明显的方法可以做到这一点，或者这是一种常见的模式？”这里有什么问题吗？@JGFMK“问题是，是否有其他明显的方法可以做到这一点，或者这是一种常见的模式？”有趣的选择。所以无论如何，我们必须用一个函数显式地完成这项工作，对吗？没有像编码/解码URL这样的方法吗？没有，没有内置的函数。但是，如果您愿意更改URL中参数的格式，可以传递JSON。它将保持数据类型，并且可以通过一个或两个函数调用进行解码/编码。它只是在URL中看起来不太好…请您添加一个这样的示例，我无法想象数据类型将如何保存在URL中。我有类似于
kpn:“234”
的例子，其中
kpn
是一个数字字符串，在转换回字符串时应该保留为字符串。我想到的是
router.navigate（['filter'，{json:json.stringify（searchFilter）}]）
用于发送，以及
返回Object assign（new searchFilter（），json.parse（params.json））
关于接收部分……但我看到了你的另一条评论，你说你也有日期：JSON没有日期类型，因此这对你没有帮助。如果您能编辑您的问题并在示例中添加日期，这将是一件好事。有趣的选择。所以无论如何，我们必须用一个函数显式地完成这项工作，对吗？没有像编码/解码URL这样的方法吗？没有，没有内置的函数。但是，如果您愿意更改URL中参数的格式，可以传递JSON。它将保持数据类型，并且可以通过一个或两个函数调用进行解码/编码。它只是在URL中看起来不太好…请您添加一个这样的示例，我无法想象数据类型将如何保存在URL中。我有类似于
kpn:“234”
的例子，其中
kpn
是一个数字字符串，在转换回字符串时应该保留为字符串。我想到的是
router.navigate（['filter'，{json:json.stringify（searchFilter）}]）
用于发送，以及
返回Object assign（new searchFilter（），json.parse（params.json））
关于接收部分……但我看到了你的另一条评论，你说你也有日期：JSON没有日期类型，因此这对你没有帮助。如果您能编辑您的问题并在示例中添加一个日期，那就太好了。在
demoParams
qty
和
pin
中，在我的例子中，将是字符串，如
qty:“90”
。我也有
Date
类型。@sabithpocker对于
quaty
和
pin
，您可以使用
parseInt
功能，如对该答案的编辑中所示。对于
日期
，您可以使用类似的技术。在
demoParams中
数量
和
pin
将是字符串，在我的情况下，类似于
数量：“90”
。我也有
Date
类型。@sabithpocker对于
quaty
和
pin
，您可以使用
parseInt
功能，如对该答案的编辑中所示。对于
日期
，您可以使用类似的技术。