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

Question

我希望window.location搜索参数中的一个值传递到依赖提供程序工厂的主体，最好是以惯用的Angular方式。

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

考虑的方法：

1. 直接使用window.location.href。使代码依赖于浏览器，可能会破坏测试装置或任何其他想要在浏览器外执行代码的东西
2. 使用PlatformLocation.href。文档说"应用程序开发人员不应该直接使用这个类。">
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。

你可以像下面的例子一样使用角度路由器：

@Service()
export class MyFactory {
constructor(private route: ActivatedRoute) {}
fetch() {
const backendUrl = route.snapshot.queryParams['backend'] || 'defaultUrl';
// do something here
}
}

或者，您可以使用Location对象来获得如下查询参数：

const backendUrl = new URLSearchParams(Location.search).get('backend');
// do something here