如何在工厂提供程序(Angular4)中获取QueryParam
如何在工厂提供程序(Angular4)中获取QueryParam
提问于 2017-07-28 20:38:01
我想在我的应用程序中提供一个常量，基于url的QueryParam。
localhost:4200?flag=true在我的模块提供者中，我添加了
{ provide: FLAG, useFactory: FlagFactory, deps: [...] }因此，我很感兴趣的是，是否有一种方法可以在不手动解析url的情况下做到这一点。
function FlagFactory() {
return location.search.includes('flag');
}回答 2
Stack Overflow用户
发布于 2017-07-28 23:54:26
使用Angular Router怎么样？
路由器跟踪查询参数，因此它们应该在您的初始路由'/‘上可用
您的根组件可能有一条允许这样做的路由
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.flag = params['flag'];
});
}Stack Overflow用户
发布于 2018-06-29 04:46:47
我可以通过使用Angular的resolve来做到这一点。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]
}]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45373762
复制相关文章
相似问题