Question

我正在开发一个具有4个路由器插座（主要是1个和3个名称插座）的应用。我正在使用延迟加载来获得良好的性能，但是无法在最后一层嵌套上进行路由。要么路径是已知的，但是组件不会显示在命名的插座中，或者是角度抛出无法匹配任何路径等。

这是我的app-routing.module.ts：

    const routes: Routes = [
  { path: '', redirectTo: 'onboarding', pathMatch: 'full' },
  {
    path: 'onboarding',
    loadChildren: () =>
      import('./pages/onboarding/onboarding.module').then(
        m => m.OnboardingPageModule
      )
  },
  {
    path: 'users',
    canActivate [AuthGuard],
    loadChildren: () =>
      import('./pages/user/user.module').then(m => m.UserPageModule) 

  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      paramsInheritanceStrategy: 'always'
    })
  ],
  exports: [RouterModule]
})

然后在我的user-routing.module.ts

中

const routes: Routes = [
  {
    path: '',
    component: UserPage,
    children: [
      {
        path: '',
        redirectTo: 'conversations'
      },
      {
        path: 'conversations',
        loadChildren: () =>
          import('@pages/user-conversations/user-conversations.module').then(
            m => m.UserConversationsPageModule
          )
      },
      {
        path: 'settings',
        loadChildren: () =>
          import('@pages/settings/settings.module').then(
            m => m.SettingsPageModule
          )
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

此处的设置工作正常。我想更深入地进行对话，user-conversations-routing.module.ts看起来像：

const routes: Routes = [
  {
    path: '',
    component: UserConversationsPage,
    outlet: 'user',
    children: [
      {
        path: ':conversationId',
        loadChildren: () =>
          import('@pages/conversation/conversation.module').then(m => m.ConversationPageModule)
      }
    ]
  }
];

最后是conversation-routing-module.ts：

const routes: Routes = [
  {
    path: '',
    component: ConversationPage,
    outlet: 'conversations',
  }
];

使用此配置，当我键入：user/conversations/-LxDT9dq5RIhcFi0VpcO时，我无法获得上一个嵌套级别，因此，我收到Angular无法匹配任何路线错误，并且最后一个插座中未显示任何内容。 / p>

我尝试了很多事情，但是无法正常工作。也许我使用conversationId的方式有问题吗？任何帮助，将不胜感激：）如果有什么不同，我正在使用Ionic 4。

Angular 8深层嵌套路由，命名为出口和延迟加载

0 个答案: