ActivatedRoute 数据不会在具有不同查询参数的相同 url 导航上更改答案

【问题标题】：ActivatedRoute data doesn't change on same url navigation with different query paramsActivatedRoute 数据不会在具有不同查询参数的相同 url 导航上更改
【发布时间】：2019-08-13 23:16:06
【问题描述】：

我正在尝试实现一个过滤器，一旦用户提交了过滤器表单，我就会将表单的内容作为查询参数传递，并且解析器会根据过滤器标准进行服务调用以获取新内容。

这就是我设置路由的方式（ReferralsPage 是一个延迟加载的组件）

//app-routing.module.ts
    {
        path: 'home',
        resolve: {
          loggedIn: AuthenticationResolver
        },
        children: [
          { path: '', redirectTo: 'referrals', pathMatch: 'full' },
          { path: 'referrals', loadChildren: './pages/referrals/referrals.module#ReferralsPageModule' }]
    }

//referralsPageModule.ts
    const routes: Routes = [
      {
        path: '',
        component: ReferralsPage,
        resolve: {
          response: ReferralsResolver
        },
        runGuardsAndResolvers: 'paramsOrQueryParamsChange'
      }
    ];

而routes是在ReferralsPageModule中导入的RouterModule的forChild()方法中传入的。

这是我的ReferralsResolver 中的resolve() 函数

resolve(snapshot: ActivatedRouteSnapshot): Observable<ReferralSearchResponse> {
    const criteria = this._getFilterCriteria(snapshot);
    const sort = (criteria && criteria.sort) ? criteria.sort : '-lastUpdated';
    return this._referralsService.getReferrals(1, 25, sort, criteria)
        .pipe(tap(console.log))
  }

最后，这是对我的组件中激活的路由数据的订阅。

 ngOnInit() {
    this._activatedRoute.data.subscribe((val) => {
      console.log(val);
    })
}

这就是我使用router.navigate() 以不同的queryParams 留在页面中的方式。

this._router.navigate([], { relativeTo: this._activatedRoute, queryParams: this.filterCriteria })

我的问题是 activatedRouteData subscription 在 first 时间获得已解决的 data。但是，一旦我应用过滤器并更改 queryParams，我的解析器就会运行并从服务器获取数据。但是，activatedRouteData subscription 永远不会收到任何新数据。

【问题讨论】：

标签： angular routes lazy-loading ionic4 resolve

【解决方案1】：

替代解决方案，您可以在构造函数中强制组件像这样重新加载

constructor(private router: Router) {
   this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}

【讨论】：

我相信我遇到了您的旧答案，并且我之前已经尝试过。它不起作用。我又试了一次。没用。这很奇怪，因为解析器会触发，我可以在我的休息调用后立即在 tap() 函数中看到新数据。但是，activatedRoute.data 流永远不会获取新数据。
道歉，法塔赫。我忘了在问题中添加 Ionic4 标签。这似乎是一个离子错误。我开始了一个新的 Angular 应用程序。将包括 onSameUrlNavigation: 'reload', runGuardsAndResolvers: 'always' 在内的所有样板文件添加到具有延迟加载模块的项目中，并且工作正常。每次触发相同的页面重新加载时，我都会在 activateRoute.data 流中获得新的已解析数据。但是，这在 Ionic 4 中似乎不起作用。如果您精通 Ionic4，我会要求您从 Ionic 开始新的 Tabs 入门模板。它带有延迟加载的模块，因此设置较少。