Question

我在“我的发票”侧面导航项中有此“全部”，以显示所有发票。

还有一个选择框，可根据发票的状态过滤发票。

Please refer to the this image for better understanding

当我在选择框中选择一个项目时，queryParam（“状态”）将被更新。我也订阅了queryParams以便过滤发票并将它们显示在表格中。但是问题是当我尝试重新加载页面时，我正被重定向到localhost:4200/，该页面什么也没显示。

这是该组件的路线：

{ path: "invoices", component: InvoiceClaimListComponent, data: { title: "All Invoices", activeRoute: "invoices", isInvoices : true } }

这是我订阅queryParams的方式：

this.route.queryParamMap.subscribe(qp => {
      if(qp['status']) {
        this.statusFilter = this.reverseRouteMap[qp['status']];
      } else {
        this.statusFilter = this.reverseRouteMap['all'];
      }
      this.reloadData();
    });

也请查看我订阅路由器事件的应用程序组件以获取数据。

this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map((route) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => {
        this.title = event['title'];
        /**
         * Code to handle route on reload
         */
        this.activeRoute = event['activeRoute'];
        if (event['isInvoices']) {
          this.currentNavigationList = "myInvoices";
        } else if (event['isMasters']) {
          this.currentNavigationList = "masters";
        } else if (event['isMOA']) {
          this.currentNavigationList = "MOA";
        } else if (event['isReports']) {
          this.currentNavigationList = "reports";
        } else {
          this.currentNavigationList = "";
        }
        if (event['isSideNavItem']) {
          this.currentNavigationListItem = this.activeRoute;
        } else {
          this.currentNavigationListItem = "";
        }
      });

需要此代码以突出显示侧面导航栏中的当前导航项目。

无法重新加载角度路由中具有queryParams的页面

0 个答案: