无法从 App.Component 读取查询字符串参数
Unable to read querystring parameters from App.Component
我想集中 where/how 我在整个应用程序中读取了一个特定的查询字符串参数,所以我认为最好的地方是 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 所指出的,我的问题是 App.Component 不在 router-outlet
.
中
此外,@Nathan 还指出:
You can access Router events and iterate over them wherever you want
in the app though, which is why your router.events.subscribe(...)
triggers.
然后我在我的路线上启用了跟踪:
RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', enableTracing: true })
并且看到 ActivationEnd
事件包含一个具有 queryParams 的 snapshot
。最后,如果事件是 ActivationEnd
.
,我将订阅路由器事件并处理我的查询字符串值
this.router.events.subscribe(event => {
if(event instanceof ActivationEnd) {
const code = event.snapshot.queryParams['code'];
if (code) {
// handle it...
}
}
}
ActivatedRoute
可以从通过 router-outlet
加载的组件订阅。由于 AppComponent
未通过任何出口加载,因此您无法订阅其中的 ActivatedRoute
参数。重用策略对此没有影响。
从文档 https://angular.io/api/router/ActivatedRoute 我们知道以下内容:
[ActivatedRoute] Contains the information about a route associated with a component loaded in an outlet.
没有出口加载 AppComponent
,因此您的订阅不会触发。不过,您 可以 访问路由器事件并在应用程序中的任意位置迭代它们,这就是 router.events.subscribe(...)
触发器的原因。
我想集中 where/how 我在整个应用程序中读取了一个特定的查询字符串参数,所以我认为最好的地方是 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 所指出的,我的问题是 App.Component 不在 router-outlet
.
此外,@Nathan 还指出:
You can access Router events and iterate over them wherever you want in the app though, which is why your router.events.subscribe(...) triggers.
然后我在我的路线上启用了跟踪:
RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', enableTracing: true })
并且看到 ActivationEnd
事件包含一个具有 queryParams 的 snapshot
。最后,如果事件是 ActivationEnd
.
this.router.events.subscribe(event => {
if(event instanceof ActivationEnd) {
const code = event.snapshot.queryParams['code'];
if (code) {
// handle it...
}
}
}
ActivatedRoute
可以从通过 router-outlet
加载的组件订阅。由于 AppComponent
未通过任何出口加载,因此您无法订阅其中的 ActivatedRoute
参数。重用策略对此没有影响。
从文档 https://angular.io/api/router/ActivatedRoute 我们知道以下内容:
[ActivatedRoute] Contains the information about a route associated with a component loaded in an outlet.
没有出口加载 AppComponent
,因此您的订阅不会触发。不过,您 可以 访问路由器事件并在应用程序中的任意位置迭代它们,这就是 router.events.subscribe(...)
触发器的原因。