Question

我无法让Angular路由以下涉及嵌套路由器出口的情况。这个想法是在顶部有一个应用程序范围的横幅，然后是一个仪表板导航组件，该组件具有自己的路由器出口以显示组件。这些组件应该具有自己的路由器出口，以便（例如，显示主从模式，左侧为master，右侧为detail）。我能够路由单个命名的出口，但不能路由另一个命名的出口内的命名子出口。

AppComponent包含主出口<router-outlet></router-outlet>，该主出口用于显示延迟加载的模块中的DashboardNavComponent。 DashboardNavComponent包含<router-outlet name='dashboard'></router-outlet>，其中应显示主要组件。我可以正常使用（即，路由到“ app / dashboard / user / 1”会显示横幅，导航和UserMasterComponent。但是我无法路由到app/dashboard/user/1/contact并显示横幅，导航，UserMasterComponent以及Contact路由器插座中的detail组件。

这些是我的路线的简化版本，我尝试了多种路线配置。通过将它们分成单独的'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'
              }
            ]
          }
        ]
      }
    ]
  }
};

角度不路由到嵌套路由器出口

1 个答案: