将查询参数注入 Angular 中的依赖提供程序工厂

Question

我想要一个来自window.location搜索参数的值传递给依赖提供者工厂的主体，理想情况下以惯用的 Angular 方式。

用例：编写我的第一个 Angular 应用程序我的应用程序在一个端口上运行，后端服务器在另一个端口上。 我想 append &backend=localhost:12345到 URL 让应用程序与该主机对话。 这是只读的，手写到 URL 栏。 我不想导航到这样的 URL。

考虑的方法：

1. 直接使用window.location.href 。 使代码依赖于浏览器，可能会破坏测试装置或任何其他想要在浏览器之外执行代码的东西。
2. 使用PlatformLocation.href 。 文档说“应用程序开发人员不应直接使用此 class。”
3. 使用Location.path() 。 似乎可以工作，但似乎也没有提供任何访问完整 URL 的方法。 独立路径包含查询参数，但作为URL构造函数的参数似乎无效，所以我最终得到了类似new URL('http://no-such-host/' + location.path()).searchParams.get('backend') 。 算不上优雅。
4. 以某种方式使用ActivatedRoute.queryParams 。 将ActivatedRoute注入我的工厂显然会给我一个默认实例（字符串化为Route(url:'', path:'') ），因此查询参数似乎不存在。 并且queryParams方法返回一个Observable ，而从我在网上阅读的内容来看，为提供者工厂使用异步代码流充其量是棘手的。

有没有更好的方法让工厂根据查询参数做出决策？

Answer 1

如果我理解正确，您想以编程方式从您的路径中获取查询参数backend 。

您可以使用 Angular 路由器，如下例所示：

@Service()
export class MyFactory {
  constructor(private route: ActivatedRoute) {}

  fetch() {
    const backendUrl = route.snapshot.queryParams['backend'] || 'defaultUrl';

    // do something here
  }
}

或者，您可以使用Location object 来获取如下查询参数：

const backendUrl = new URLSearchParams(Location.search).get('backend');

// do something here