Question

在我的应用程序中，我的路由定义如下：

应用-module.ts

{ path: "myInbox", component: MyInboxComponent, data: { title: "My Inbox", activeRoute: "myInbox" },
children: [
  { path: "", redirectTo: "personal", pathMatch: 'full', data: { title: "My Inbox" } },
  { path: "personal", component: MassApprovalComponent, data: { title: "My Inbox", activeRoute: "myInbox/personal" } },
  { path: "pool", component: TaskClaimComponent, data: { title: "My Inbox", activeRoute: "myInbox/pool" } }
] }

在MassApprovalComponent内（我的收件箱的子组件），我有不同的标签。点击这些标签，我在html中附加queryParams，如下所示：

<ul class="nav nav-tabs">
  <li class="nav-item" (click)="switchTab('all')">
    <a class="nav-link small" [routerLink]="" [queryParams]="{tab: 'all'}" [ngClass]="{'active': selectedTab == 'all'}">All</a>
  </li>
  <li class="nav-item" (click)="switchTab('businessApproval')">
    <a class="nav-link small" [routerLink]="" [queryParams]="{tab: 'businessApproval'}" [ngClass]="{'active': selectedTab == 'businessApproval'}">Business Tasks</a>
  </li>
  <li class="nav-item" *ngIf="hasRole('FINANCE')" (click)="switchTab('financeApproval')">
    <a class="nav-link small" [routerLink]="" [queryParams]="{tab: 'financeApproval'}" [ngClass]="{'active': selectedTab == 'financeApproval'}">Finance Tasks</a>
  </li>
  <li class="nav-item" *ngIf="hasRole('BANKING_OPS')" (click)="switchTab('documentConfirmation')">
    <a class="nav-link small" [routerLink]="" [queryParams]="{tab: 'documentConfirmation'}" [ngClass]="{'active': selectedTab == 'documentConfirmation'}">Documents Confirmation</a>
  </li>
  <li class="nav-item" *ngIf="hasRole('BANKING_OPS')" (click)="switchTab('documentVerification')">
    <a class="nav-link small" [routerLink]="" [queryParams]="{tab: 'documentVerification'}" [ngClass]="{'active': selectedTab == 'documentVerification'}">Documents Verification</a>
  </li>
</ul>

不要假设我点击financeApproval标签，现在地址栏中的路线将显示为'<basePath>/myInbox/personal?tab=financeApproval'

当我复制此路径并将其再次放入地址栏并点击输入时，它很好。但是在重新加载时，我被重定向到根路径<basePath>/。

在将enablingTrace设置为true时，当我重新加载页面并查看控制台时，我会看到以下两个循环。

导航第1个周期结束：

NavigationEnd(id: 1, url: '/myInbox/personal?tab=documentConfirmation', urlAfterRedirects: '/myInbox/personal?tab=documentConfirmation')

导航第二周期开始：

NavigationStart(id: 2, url: '/myInbox/personal%3Ftab%3DdocumentConfirmation')

导航第2个周期结束

NavigationEnd(id: 2, url: '/myInbox/personal%3Ftab%3DfinanceApproval', urlAfterRedirects: '/')

这就是我在 app-component.ts （ ngOnInit ）钩子

中处理重新加载的方式

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'];

        //this.router.navigate([this.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 = "";                    
        }
      });

此外，我正在订阅MassApprovalComponent中的路由，因为选项卡选择路线正在变化，然后根据我设置selectedTab的路线，它将动态配置子组件，如下所示：

this.route.queryParams.subscribe(params => {
      this.selectedTab = params['tab'];
      if(this.selectedTab == undefined){
        this.selectedTab = "all";
      }
      this.refreshApprovalTasksList();
    });

当使用具有queryParams的路由重新加载页面时，角度路由事件周期运行两次

0 个答案: