Angular 角度模块调用错误的路径。路由问题

我有一个带有一些模块和路由层次结构的应用程序。 注册后，用户进入“登机”模块，该模块有自己的路线层次结构

例如，路线应该如下所示

"appdomain/#/onboarding/greeting" (this is the first step)
"appdomain/#/onboarding/strategies"
"appdomain/#/onboarding/object/incomesCreation"
"appdomain/#/onboarding/object/editIncomes/:id"

登录完成后，用户转到应用程序的另一部分，该部分有两个模块

IncomesModule
ExpensesModule

以及这些模块的路由：

"appdomain/#/expenses/createBudget"
"appdomain/#/expenses/1234"  (here goes the ID of object)

"appdomain/#/incomes/create"
"appdomain/#/incomes/1234" (here goes the ID of object)

“寄宿”模块需要使用费用和收入模块中的一些组件

例如，“appdomain/#/Onboard/object/EditIncomers/1234”和“appdomain/#/Incomers/1234”应显示相同的组件（FreeBalanceEditPageComponent），但包装方式不同。 为此，我在模块配置中导出了所需的组件

FreeBalanceEditPageComponent调用api方法以按Id获取信息

ngOnInit() {
this.income$ = this.route.paramMap.pipe(
  switchMap((params: ParamMap) =>
    this.service.getIncomeFullInfo(params.get('id')))
);

}

所以，我的问题是，当用户出于某种原因转到“appdomain/#/onboarding/greeting”时，应用程序希望呈现FreeBalanceEditPageComponent。我得出这个结论，因为在浏览器的“网络”选项卡中 我看到调用“api/getIncomeFullInfo？id=greeting”（这给了我一个错误）

这是我的配置

应用程序路由。模块

  {
    path: 'onboarding',
    loadChildren: () => import('./onboarding/onboarding.module').then(mod => mod.OnboardingModule),
    canLoad: [SecurityGuard, OnboardingGuard]
  },
  {
    path: '',
    loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
    canActivate: [SecurityGuard, DashboardGuard],
    canLoad: [SecurityGuard, DashboardGuard],
    pathMatch: 'full'
  }];

  {
    path: '',
    component: OnboardingComponent,
    canActivate: [SecurityGuard],
    children: [
      {
        path: '',
        canActivateChild: [SecurityGuard],
        children: [
          {path: 'greeting', component: OnboardingGreetingComponent},
          {path: 'freebalance', component: FreeBalanceComponent},
          {path: 'passive', component: PassiveIncomeComponent},
          {path: 'strategies', component: StrategiesComponent},
          {path: 'targets', component: TargetsComponent},
          {path: 'finish', component: FinishComponent},
          {path: 'profile', component: OnbProfileComponent},
          {
            path: 'object',
            component: OnbObjectWrapperComponent,
            canLoad: [SecurityGuard, OnboardingGuard],
            children: [
              {path: 'incomesCreation', component: OnbIncomesCreationComponent},
              {path: 'budgetCreation', component: OnbBudgetCreationComponent},
              {path: 'editIncomes/:id', component: OnbIncomesEditComponent},
              {path: 'regularExpenseCreation', component: OnbRegularExpenseCreationComponent},
              {path: 'createPlannedExpense', component: OnbPlannedExpenseCreationComponent},
              {path: 'createGoal', component: OnbGoalCreationComponent},
              {path: 'chooseGoal', component: OnbChooseGoalTypeComponent},
              {path: 'editGoal/:id', component: CreatedGoalFullComponent},
              {path: 'editExpense/:id', component: CreatedExpenseFullInfoComponent}
            ],
          },
          {path: '', component: OnboardingGreetingComponent, pathMatch: 'full'}
        ]
      }
    ]
  }
];

   {
    path: '',
    component: MainComponent,
    canActivate: [SecurityGuard],
    children: [
      {
        path: '',
        canActivateChild: [SecurityGuard, DashboardGuard],
        children: [
          {path: 'timeline', component: TimelineComponent},
          {path: 'calendar', component: CalendarComponent},
          {
            path: 'situation',
            loadChildren: () => import('../situation/situation.module').then(mod => mod.SituationModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
            pathMatch: 'full'
          },
          {
            path: 'expenses',
            loadChildren: () => import('../expenses/expenses.module').then(mod => mod.ExpensesModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
          },
          {
            path: 'incomes',
            loadChildren: () => import('../incomes/incomes.module').then(mod => mod.IncomesModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
          },
          {
            path: 'profile',
            loadChildren: () => import('../profile/profile.module').then(mod => mod.ProfileModule),
            canActivate: [SecurityGuard],
            canLoad: [SecurityGuard],
          },
          {path: '', component: TimelineComponent}
        ]
      }
    ]
  }
];

  {
    path: '',
    canActivate: [SecurityGuard],
    canLoad: [SecurityGuard],
    component: IncomesOutletComponent,
    children: [
      {
        path: 'create',
        component: IncomesCreationComponent,
        canActivateChild: [SecurityGuard]
      },
      {
        path: 'edit',
        component: IncomeEditPageComponent,
        canActivateChild: [SecurityGuard],
        pathMatch: 'full'
      },
      {
        path: 'edit/:id',
        component: IncomeEditPageComponent,
        canActivateChild: [SecurityGuard]
      },
      {
        path: ':id',
        component: FreeBalanceEditPageComponent,
        canActivateChild: [SecurityGuard],
      }
    ]
  }];

入职路由。模块

  {
    path: 'onboarding',
    loadChildren: () => import('./onboarding/onboarding.module').then(mod => mod.OnboardingModule),
    canLoad: [SecurityGuard, OnboardingGuard]
  },
  {
    path: '',
    loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
    canActivate: [SecurityGuard, DashboardGuard],
    canLoad: [SecurityGuard, DashboardGuard],
    pathMatch: 'full'
  }];

  {
    path: '',
    component: OnboardingComponent,
    canActivate: [SecurityGuard],
    children: [
      {
        path: '',
        canActivateChild: [SecurityGuard],
        children: [
          {path: 'greeting', component: OnboardingGreetingComponent},
          {path: 'freebalance', component: FreeBalanceComponent},
          {path: 'passive', component: PassiveIncomeComponent},
          {path: 'strategies', component: StrategiesComponent},
          {path: 'targets', component: TargetsComponent},
          {path: 'finish', component: FinishComponent},
          {path: 'profile', component: OnbProfileComponent},
          {
            path: 'object',
            component: OnbObjectWrapperComponent,
            canLoad: [SecurityGuard, OnboardingGuard],
            children: [
              {path: 'incomesCreation', component: OnbIncomesCreationComponent},
              {path: 'budgetCreation', component: OnbBudgetCreationComponent},
              {path: 'editIncomes/:id', component: OnbIncomesEditComponent},
              {path: 'regularExpenseCreation', component: OnbRegularExpenseCreationComponent},
              {path: 'createPlannedExpense', component: OnbPlannedExpenseCreationComponent},
              {path: 'createGoal', component: OnbGoalCreationComponent},
              {path: 'chooseGoal', component: OnbChooseGoalTypeComponent},
              {path: 'editGoal/:id', component: CreatedGoalFullComponent},
              {path: 'editExpense/:id', component: CreatedExpenseFullInfoComponent}
            ],
          },
          {path: '', component: OnboardingGreetingComponent, pathMatch: 'full'}
        ]
      }
    ]
  }
];

   {
    path: '',
    component: MainComponent,
    canActivate: [SecurityGuard],
    children: [
      {
        path: '',
        canActivateChild: [SecurityGuard, DashboardGuard],
        children: [
          {path: 'timeline', component: TimelineComponent},
          {path: 'calendar', component: CalendarComponent},
          {
            path: 'situation',
            loadChildren: () => import('../situation/situation.module').then(mod => mod.SituationModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
            pathMatch: 'full'
          },
          {
            path: 'expenses',
            loadChildren: () => import('../expenses/expenses.module').then(mod => mod.ExpensesModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
          },
          {
            path: 'incomes',
            loadChildren: () => import('../incomes/incomes.module').then(mod => mod.IncomesModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
          },
          {
            path: 'profile',
            loadChildren: () => import('../profile/profile.module').then(mod => mod.ProfileModule),
            canActivate: [SecurityGuard],
            canLoad: [SecurityGuard],
          },
          {path: '', component: TimelineComponent}
        ]
      }
    ]
  }
];

  {
    path: '',
    canActivate: [SecurityGuard],
    canLoad: [SecurityGuard],
    component: IncomesOutletComponent,
    children: [
      {
        path: 'create',
        component: IncomesCreationComponent,
        canActivateChild: [SecurityGuard]
      },
      {
        path: 'edit',
        component: IncomeEditPageComponent,
        canActivateChild: [SecurityGuard],
        pathMatch: 'full'
      },
      {
        path: 'edit/:id',
        component: IncomeEditPageComponent,
        canActivateChild: [SecurityGuard]
      },
      {
        path: ':id',
        component: FreeBalanceEditPageComponent,
        canActivateChild: [SecurityGuard],
      }
    ]
  }];

仪表板布线模块

  {
    path: 'onboarding',
    loadChildren: () => import('./onboarding/onboarding.module').then(mod => mod.OnboardingModule),
    canLoad: [SecurityGuard, OnboardingGuard]
  },
  {
    path: '',
    loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
    canActivate: [SecurityGuard, DashboardGuard],
    canLoad: [SecurityGuard, DashboardGuard],
    pathMatch: 'full'
  }];

  {
    path: '',
    component: OnboardingComponent,
    canActivate: [SecurityGuard],
    children: [
      {
        path: '',
        canActivateChild: [SecurityGuard],
        children: [
          {path: 'greeting', component: OnboardingGreetingComponent},
          {path: 'freebalance', component: FreeBalanceComponent},
          {path: 'passive', component: PassiveIncomeComponent},
          {path: 'strategies', component: StrategiesComponent},
          {path: 'targets', component: TargetsComponent},
          {path: 'finish', component: FinishComponent},
          {path: 'profile', component: OnbProfileComponent},
          {
            path: 'object',
            component: OnbObjectWrapperComponent,
            canLoad: [SecurityGuard, OnboardingGuard],
            children: [
              {path: 'incomesCreation', component: OnbIncomesCreationComponent},
              {path: 'budgetCreation', component: OnbBudgetCreationComponent},
              {path: 'editIncomes/:id', component: OnbIncomesEditComponent},
              {path: 'regularExpenseCreation', component: OnbRegularExpenseCreationComponent},
              {path: 'createPlannedExpense', component: OnbPlannedExpenseCreationComponent},
              {path: 'createGoal', component: OnbGoalCreationComponent},
              {path: 'chooseGoal', component: OnbChooseGoalTypeComponent},
              {path: 'editGoal/:id', component: CreatedGoalFullComponent},
              {path: 'editExpense/:id', component: CreatedExpenseFullInfoComponent}
            ],
          },
          {path: '', component: OnboardingGreetingComponent, pathMatch: 'full'}
        ]
      }
    ]
  }
];

   {
    path: '',
    component: MainComponent,
    canActivate: [SecurityGuard],
    children: [
      {
        path: '',
        canActivateChild: [SecurityGuard, DashboardGuard],
        children: [
          {path: 'timeline', component: TimelineComponent},
          {path: 'calendar', component: CalendarComponent},
          {
            path: 'situation',
            loadChildren: () => import('../situation/situation.module').then(mod => mod.SituationModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
            pathMatch: 'full'
          },
          {
            path: 'expenses',
            loadChildren: () => import('../expenses/expenses.module').then(mod => mod.ExpensesModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
          },
          {
            path: 'incomes',
            loadChildren: () => import('../incomes/incomes.module').then(mod => mod.IncomesModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
          },
          {
            path: 'profile',
            loadChildren: () => import('../profile/profile.module').then(mod => mod.ProfileModule),
            canActivate: [SecurityGuard],
            canLoad: [SecurityGuard],
          },
          {path: '', component: TimelineComponent}
        ]
      }
    ]
  }
];

  {
    path: '',
    canActivate: [SecurityGuard],
    canLoad: [SecurityGuard],
    component: IncomesOutletComponent,
    children: [
      {
        path: 'create',
        component: IncomesCreationComponent,
        canActivateChild: [SecurityGuard]
      },
      {
        path: 'edit',
        component: IncomeEditPageComponent,
        canActivateChild: [SecurityGuard],
        pathMatch: 'full'
      },
      {
        path: 'edit/:id',
        component: IncomeEditPageComponent,
        canActivateChild: [SecurityGuard]
      },
      {
        path: ':id',
        component: FreeBalanceEditPageComponent,
        canActivateChild: [SecurityGuard],
      }
    ]
  }];

收入路由。模块

  {
    path: 'onboarding',
    loadChildren: () => import('./onboarding/onboarding.module').then(mod => mod.OnboardingModule),
    canLoad: [SecurityGuard, OnboardingGuard]
  },
  {
    path: '',
    loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
    canActivate: [SecurityGuard, DashboardGuard],
    canLoad: [SecurityGuard, DashboardGuard],
    pathMatch: 'full'
  }];

  {
    path: '',
    component: OnboardingComponent,
    canActivate: [SecurityGuard],
    children: [
      {
        path: '',
        canActivateChild: [SecurityGuard],
        children: [
          {path: 'greeting', component: OnboardingGreetingComponent},
          {path: 'freebalance', component: FreeBalanceComponent},
          {path: 'passive', component: PassiveIncomeComponent},
          {path: 'strategies', component: StrategiesComponent},
          {path: 'targets', component: TargetsComponent},
          {path: 'finish', component: FinishComponent},
          {path: 'profile', component: OnbProfileComponent},
          {
            path: 'object',
            component: OnbObjectWrapperComponent,
            canLoad: [SecurityGuard, OnboardingGuard],
            children: [
              {path: 'incomesCreation', component: OnbIncomesCreationComponent},
              {path: 'budgetCreation', component: OnbBudgetCreationComponent},
              {path: 'editIncomes/:id', component: OnbIncomesEditComponent},
              {path: 'regularExpenseCreation', component: OnbRegularExpenseCreationComponent},
              {path: 'createPlannedExpense', component: OnbPlannedExpenseCreationComponent},
              {path: 'createGoal', component: OnbGoalCreationComponent},
              {path: 'chooseGoal', component: OnbChooseGoalTypeComponent},
              {path: 'editGoal/:id', component: CreatedGoalFullComponent},
              {path: 'editExpense/:id', component: CreatedExpenseFullInfoComponent}
            ],
          },
          {path: '', component: OnboardingGreetingComponent, pathMatch: 'full'}
        ]
      }
    ]
  }
];

   {
    path: '',
    component: MainComponent,
    canActivate: [SecurityGuard],
    children: [
      {
        path: '',
        canActivateChild: [SecurityGuard, DashboardGuard],
        children: [
          {path: 'timeline', component: TimelineComponent},
          {path: 'calendar', component: CalendarComponent},
          {
            path: 'situation',
            loadChildren: () => import('../situation/situation.module').then(mod => mod.SituationModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
            pathMatch: 'full'
          },
          {
            path: 'expenses',
            loadChildren: () => import('../expenses/expenses.module').then(mod => mod.ExpensesModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
          },
          {
            path: 'incomes',
            loadChildren: () => import('../incomes/incomes.module').then(mod => mod.IncomesModule),
            canActivate: [SecurityGuard, DashboardGuard],
            canLoad: [SecurityGuard, DashboardGuard],
          },
          {
            path: 'profile',
            loadChildren: () => import('../profile/profile.module').then(mod => mod.ProfileModule),
            canActivate: [SecurityGuard],
            canLoad: [SecurityGuard],
          },
          {path: '', component: TimelineComponent}
        ]
      }
    ]
  }
];

  {
    path: '',
    canActivate: [SecurityGuard],
    canLoad: [SecurityGuard],
    component: IncomesOutletComponent,
    children: [
      {
        path: 'create',
        component: IncomesCreationComponent,
        canActivateChild: [SecurityGuard]
      },
      {
        path: 'edit',
        component: IncomeEditPageComponent,
        canActivateChild: [SecurityGuard],
        pathMatch: 'full'
      },
      {
        path: 'edit/:id',
        component: IncomeEditPageComponent,
        canActivateChild: [SecurityGuard]
      },
      {
        path: ':id',
        component: FreeBalanceEditPageComponent,
        canActivateChild: [SecurityGuard],
      }
    ]
  }];

---

您的

”和这些模块的路由上有一个打字错误：“

与

expneses

@Marco分开，谢谢您的提示，但这不是问题所在。我的问题是，当我调用/登录/问候时，它认为我想要呈现FreeBalanceEditPageComponent，它在另一个模块中声明。但是我只想在路径为appdomain/incomers/1234时渲染该组件，我不知道它发生了什么。您可以尝试使用Angury，这是一个免费浏览器的调试扩展。有一个路由功能可以提供帮助。