角度模块调用错误的路线路由问题

问题描述

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

例如，路线应如下所示

"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 /＃/ onboarding / object / editIncomes / 1234” 和“ appdomain /＃/ incomes / 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],pathMatch: 'full'
  }];

onboarding-routing.module

  {
    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,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'}
        ]
      }
    ]
  }
];

dashboard-routing.module

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

收入路由模块

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular2-routing