2

我想根据来自 url 的 QueryParam 在我的应用程序中提供一个常量。

localhost:4200?flag=true

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

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

所以我很感兴趣，如果有一种方法可以在不手动解析 url 的情况下做到这一点

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

2 回答 2

1

使用 Angular 路由器怎么样？

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

你的根组件可能有一个允许这个的路由

constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.flag = params['flag']; 

    });
  }
于 2017-07-28T15:54:26.077 回答
1

我可以通过使用 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]
}]
于 2018-06-28T20:46:47.247 回答