Angular 不路由到嵌套的路由器插座

Question

我无法让 Angular 路由以下涉及嵌套路由器插座的场景。这个想法是在顶部有一个应用程序范围的横幅，然后是一个仪表板导航组件，它有自己的路由器插座来显示组件。这些组件应该能够拥有自己的路由器插座，以便（例如，显示一个主从模式，左边是主，右边是细节）。我可以路由单个命名插座，但不能路由另一个命名插座中的命名子插座。

AppComponent 包含主出口<router-outlet></router-outlet>，用于显示来自延迟加载模块的DashboardNavComponent。 DashboardNavComponent 包含 <router-outlet name='dashboard'></router-outlet> 应该显示主要组件。我可以让它工作（即路由到'app/dashboard/user/1'显示横幅、导航和UserMasterComponent。但我无法路由到app/dashboard/user/1/contact并显示横幅、导航、UserMasterComponent还有detail router-outlet 中的Contact 组件。

这些是我的路线的简化版本，我尝试了多种路线配置。我已经能够通过将它们分成单独的 'user/:id/contact' 和 'user/:id/profile' 路由来使其工作，但这会导致 DashboardNavComponent 和 UserMasterComponent 在每条路由上重新加载他们之间的变化。我对 Angular 很陌生，但如果它们是 'user/:id' 的子路由，我会假设它只会刷新最终 ActivatedRoute 的组件（即'contact'或'profile'）。

app-routing.module.ts

const routes = {
  path: 'app',
  children: [
    {
      path: 'dashboard',
      loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
    }
  ]
}

dashboard-routing.module.ts

const routes = {
  {
    path: 'user/:id',
    component: DashboardNavComponent,
    children: [
      {
        path: 'contact',
        component: UserMasterComponent,
        outlet: 'master',
        children: [
          {
            path: '',
            component: ContactComponent,
            outlet: 'detail'
          }
        ]
      },
      {
        path: 'profile',
        component: UserMasterComponent,
        outlet: 'master',
        children: [
          {
            path: '',
            component: ProfileComponent,
            outlet: 'detail'
          }
        ]
      }
    ]
  }
};

Answer 1

在过去几天花费了整整一个工作日之后，我在 Stack Overflow 上发布后的 10 分钟内解决了它 :) 希望这对某人有所帮助，因为我没有发现任何清楚记录此解决方案的问题。

我不知道每个功能都可能有一个未命名的主路由器插座，并认为我的整个应用程序可能只有一个。解决方案是使仪表板的根路由器插座具有主要路由器插座，并且只为一个路由器插座分配一个名称，即“详细”路由器。然后，在路由配置中，我删除了outlet: 'dashboard' 的所有实例。

为了防止 DashboardNavComponent 在每次路由更改时重新加载，我还必须将我的所有仪表板路由嵌套在一个包罗万象的路由中。

最终的dashboard-routing.module.ts

const routes = {
  {
    path: '',
    component: DashboardNavComponent, // Set component here to prevent re-load
    children: [
      {
        path: 'user/:id',
        children: [
          {
            path: 'contact',
            component: UserMasterComponent,
            children: [
              {
                path: '',
                component: ContactComponent,
                outlet: 'detail'
              }
            ]
          },
          {
            path: 'profile',
            component: UserMasterComponent,
            children: [
              {
                path: '',
                component: ProfileComponent,
                outlet: 'detail'
              }
            ]
          }
        ]
      }
    ]
  }
};