无法从应用程序读取查询字符串参数.组件

Question

我想在整个应用程序中集中读取特定查询字符串参数的位置/方式，所以我认为最好的方法是在app.component.ts 中

export class AppComponent implements OnInit, OnDestroy {
constructor(
private router: Router,
private activatedRoute: ActivatedRoute) {
}

然后，在ngOnInit()上，我查看快照以及不同的订阅：

ngOnInit(): void {
console.log('AppComponent - ngOnInit() -- Snapshot Params: ' + this.activatedRoute.snapshot.params['code']);
console.log('AppComponent - ngOnInit() -- Snapshot Query Params: ' + this.activatedRoute.snapshot.queryParams['code']);
console.log('AppComponent - ngOnInit() -- Snapshot Query ParamMap: ' + this.activatedRoute.snapshot.queryParamMap.get('code'));
this.activatedRouteParamsSubscription = this.activatedRoute.params.subscribe(params => {
console.log('AppComponent - ngOnInit() -- Subscription Params: ' + params['code']);
});
this.activatedRouteQueryParamsSubscription = this.activatedRoute.queryParams.subscribe(params => {
console.log('AppComponent - ngOnInit() -- Subscription Query Params: ' + params['code']);
});
this.activatedRoute.queryParamMap.subscribe(queryParams  => {
console.log('AppComponent - ngOnInit() -- Subscription Query ParamMap: ' + queryParams.get('code'));
});
this.routerEventsSubscription = this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
console.log('AppComponent - ngOnInit() -- Subscription NavigationEnd: URL=', event.url);
}
});
}

正如您所看到的，我已经为params、queryParams、queryParamMap和router.events设置了订阅。

唯一在页面导航之间触发的是router.events，但在那里，我必须手动解析URL才能获得查询字符串。

不确定这是否对它有任何影响，但我正在重写路由重用策略，以便即使页面在同一路由上也能重新加载：

export class AppRoutingModule {
constructor(private router: Router) {
this.router.routeReuseStrategy.shouldReuseRoute = function() {
return false;
};
}
}

首次访问时根页面的输出：

AppComponent - constructor() -- Snapshot Params: undefined
AppComponent - constructor() -- Snapshot Query Params: undefined
AppComponent - ngOnInit() -- Snapshot Params: undefined
AppComponent - ngOnInit() -- Snapshot Query Params: undefined
AppComponent - ngOnInit() -- Snapshot Query ParamMap: null
AppComponent - ngOnInit() -- Subscription Params: undefined
AppComponent - ngOnInit() -- Subscription Query Params: undefined
AppComponent - ngOnInit() -- Subscription Query ParamMap: null
AppComponent - ngOnInit() -- Subscription NavigationEnd: URL= /?code=logged-out

解决方案

正如@Thomaz和@Nathan都指出的那样，我的问题是应用程序。组件不在router-outlet内部。

此外，@Nathan还指出：

您可以访问路由器事件，并在任何需要的地方对其进行迭代不过，在应用程序中，这就是为什么你的router.events.subscribe(…)触发器。

然后我启用了路线跟踪：

RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', enableTracing: true })

并看到ActivationEnd事件包括一个具有queryParams的snapshot。最后，如果事件是ActivationEnd，我将订阅router事件并处理查询字符串值。

this.router.events.subscribe(event => {
if(event instanceof ActivationEnd) {
const code = event.snapshot.queryParams['code'];
if (code) {
// handle it...
}
}
}

Answer 1

ActivatedRoute可以从通过router-outlet加载的组件中订阅。由于AppComponent不是通过任何出口加载的，因此您不能在其中订阅ActivatedRoute参数。重用策略不会影响这一点。

从文档https://angular.io/api/router/ActivatedRoute我们知道以下内容：

[ActivatedRoute]包含与装载在出口中的组件相关联的路线的信息。

没有加载AppComponent的出口，因此您的订阅不会被激发。不过，您可以访问Router事件，并在应用程序中的任何位置对其进行迭代，这就是router.events.subscribe(...)触发的原因。