Question

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

这是我设置路线的方式（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'
      }
    ];

路由是通过 ReferralsPageModule 中导入的RouterModule的forChild()方法传递的。

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

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 订阅会在第一次时间内获得解析的数据。但是，一旦我应用了过滤器和 queryParams 进行了 change 更改，我的解析器就会运行并从服务器获取数据。但是， activatedRouteData 订阅永远不会收到任何新数据。

Answer 1

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

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

在具有不同查询参数的相同URL导航上，ActivatedRoute数据不会更改

1 个答案: