如何在工厂提供程序(Angular4)中获取QueryParam

Question

我想在我的应用程序中提供一个基于url的QueryParam的常量。

localhost:4200?flag=true

在我的模块提供程序中，我添加了

{ provide: FLAG, useFactory: FlagFactory, deps: [...] }

所以我很感兴趣是否有办法在不手动解析 url 的情况下做到这一点

function FlagFactory() {
return location.search.includes('flag');
}

Answer 1

使用 Angular 路由器怎么样？

路由器跟踪查询参数，因此它们应该在您的初始路由"/"上可用

您的根组件可能具有允许此操作的路由

constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.flag = params['flag']; 
});
}

Answer 2

我能够通过使用Angular的决心来做到这一点。Resolve 允许您在加载路由组件之前访问路由和查询参数。

在您的情况下，我将创建一个如下所示的解析器类：

@Injectable()
export class FlagRouteResolver implements Resolve<any> {
constructor(private flagService: FlagService) {}
resolve(route: ActivatedRouteSnapshot) {
this.flagService.isFlagged = route.queryParamMap.get('flag');
// Need to return an observable for all resolve() methods
return Observable.of(null);
}
}

你的AppModule应该看起来像这样：

@NgModule({
imports: [
RouterModule.forRoot([{
path: 'flagRoute',
component: FlagComponent,
resolve: { test: FlagRouteResolver }
}]),
],
providers: [
FlagService,
FlagRouteResolver
],
declarations: [
FlagComponent
]
})

所以现在，在你的路由组件中，你应该能够在构造函数中立即访问该值，如下所示：

constructor(private flagService: FlagService) {
this.isFlagged = this.flagService.isFlagged;
}

但是如果你仍然想注入它，你也可以这样做：

providers: [{
provide: FLAG,
useFactory: (flagService: FlagService) => {
return this.flagService.isFlagged;
},
deps: [FlagService]
}]