Angular 应用程序禁止查询参数

Question

@angular/core: 7.2.16
@angular/router: 7.2.16

我试图将各种可选参数放入路由的 queryParams 中，但由于某种原因，它们很快弹出并再次消失（正如我能够在 [=54 的地址栏中观察到的那样） =]).这是我的组件的设置：

ngOnInit() {
    this.paginator.page.subscribe(() => {
      console.log(`this.paginator.pageIndex: ${this.paginator.pageIndex}`);
      this.router.navigate([], {
        relativeTo: this.activatedRoute,
        queryParams: { page: this.paginator.pageIndex },
        queryParamsHandling: 'merge',
      });
    });

    this.activatedRoute.queryParams.subscribe((params) => {
      console.log(`params.page ${params.page}`);
    });

    this.router.events.subscribe((event) => {
      console.log(event);
    });
  }

在我的 VSCode 调试控制台中产生以下输出：

this.paginator.pageIndex: 2
src/app/tiles/consumption-report/consumption-report-view-events/consumption-report-view-events.component.ts:142
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', navigationTrigger: 'imperative', restoredState: null}
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', urlAfterRedirects: '/consumptionReportManagement/viewEvents?page=2', state: t}
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', urlAfterRedirects: '/consumptionReportManagement/viewEvents?page=2', state: t}
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', urlAfterRedirects: '/consumptionReportManagement/viewEvents?page=2', state: t, shouldActivate: true}
params.page 2
src/app/tiles/consumption-report/consumption-report-view-events/consumption-report-view-events.component.ts:138
e {snapshot: e}
e {snapshot: e}
e {snapshot: e}
e {snapshot: e}
e {routerEvent: t, position: null, anchor: null}
t {id: 5, url: '/consumptionReportManagement/viewEvents', navigationTrigger: 'imperative', restoredState: null}
t {id: 4, url: '/consumptionReportManagement/viewEvents?page=2', urlAfterRedirects: '/consumptionReportManagement/viewEvents?page=2'}
t {id: 5, url: '/consumptionReportManagement/viewEvents', urlAfterRedirects: '/consumptionReportManagement/viewEvents', state: t}
t {id: 5, url: '/consumptionReportManagement/viewEvents', urlAfterRedirects: '/consumptionReportManagement/viewEvents', state: t}
t {id: 5, url: '/consumptionReportManagement/viewEvents', urlAfterRedirects: '/consumptionReportManagement/viewEvents', state: t, shouldActivate: true}
params.page undefined
src/app/tiles/consumption-report/consumption-report-view-events/consumption-report-view-events.component.ts:138
e {snapshot: e}
e {snapshot: e}
e {snapshot: e}
e {snapshot: e}
e {routerEvent: t, position: null, anchor: null}
t {id: 5, url: '/consumptionReportManagement/viewEvents', urlAfterRedirects: '/consumptionReportManagement/viewEvents'}

如您所见，queryParams 被修改了两次，一次带有正确的参数，另一次没有参数。当我通过地址栏输入参数时，也会发生同样的事情。

我尝试了以下方法来解决这个问题

移除所有路线的所有守卫(RouterModule.forRoot(appRoutes))
我试图在调试器中追踪没有正确 queryParams 的路由事件来自哪里（没有成功，可能是因为缺乏知识）
我检查了每个 router.navigate 或 router.navigateByUrl 项目，看看是否有一些副作用
router.navigate 的不同变体 queryParamsHandling: 'merge' 或 queryParamsHandling: 'preserve'、router.navigate(['.'], ... 等
我在谷歌上搜索了 5 个多小时，但没有找到解决我问题的提示

我正在开发一些组件作为更大应用程序的一部分，但我的 none 同事正在使用 queryParams，但没有人知道为什么应用程序会这样。

Answer 1

I checked every router.navigate or router.navigateByUrl project wide to see if there is some side effects

我又做了一遍，果然发现了问题所在。就这样解决了。

Angular 应用程序禁止查询参数

Angular application suppresses queryParams

angular-routing

angular