angular - 如何从Angular 5+中的对象创建带有查询参数的url字符串？

我正在尝试从Angular 5 SPA中的对象创建URL。我的代码如下所示:

import { UrlTree, UrlSegmentGroup, DefaultUrlSerializer, UrlSegment } from "@angular/router";

const urlTree = new UrlTree();
urlTree.root = new UrlSegmentGroup([new UrlSegment("EndPoint", {})], {});
urlTree.queryParams = {
  "param1": param1Value,
  "param2": param2Value
};
const urlSerializer = new DefaultUrlSerializer();
const url = urlSerializer.serialize(urlTree);

它确实可以完成这项工作，但是对于这样一个琐碎的工作，它似乎包括了可观的开销，我想知道是否存在一种更直接的方法来从对象获取url。

我的期望是简单一些:

const url = someSerializer.serialize("/segment1/segment2", {
  "param1": param1Value,
  "param2": param2Value
})

问题:如何从Angular 5+中的对象创建带有查询参数的url字符串？

最佳答案

您可以只使用Router和UrlSerializer:

constructor(private router: Router, private serializer: UrlSerializer) {
  const tree = router.createUrlTree([], { queryParams: { foo: 'a', bar: 42 } });
  console.log(serializer.serialize(tree)); // "/?foo=a&bar=42"
}

观看演示:https://stackblitz.com/edit/angular-basic-template-3hx9at?file=src/app/hello.component.ts