Question

我有一个应用程序，在该应用程序上，我只需要登录功能即可在启动时可用，并且所有其余的代码都应在用户验证后延迟加载。

我用 core-routing.module 和 core.component 创建了一个 core.module 来解决这个问题，但是子组件（例如DashboardComponent）将在app.component.html上的router-outlet元素内部而不是在core.component.html上呈现，因此不会显示标头。

我已经搜索了很多东西，但是找不到如何工作的方法。

app-routing.module.ts

df1 = df1.reset_index()

res = pd.melt(df1, id_vars='index', value_vars=[4, 5])\
        .dropna(subset=['value']).astype(int)

print(res)

    index  variable  value
0       3         4     42
1       4         4     25
2       5         4     39
10     24         5     94
11     25         5      4
12     55         5    923
13    252         5     49

app.component.html

const routes: Routes = [
  { path: '', redirectTo: 'signin', pathMatch: 'full' },
  { path: 'signin', component: SigninComponent },
  { path: 'app', loadChildren: './core/core.module#CoreModule', canLoad: [AuthGuard] },
  { path: '**', redirectTo: 'signin' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

core-routing.module.ts

<router-outlet></router-outlet>

core.component.html

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
  { path: '**', redirectTo: 'dashboard' }
];

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

dashboard-routing.module.ts

<div id="header">
  <app-header></app-header>
</div>
<main id="content">
  <router-outlet></router-outlet>
</main>

Answer 1

这是因为您使用了2个路由器插座。因此，您必须命名路由器以渲染组件以进行更正

<router-outlet name="secondRouterOutlet"></router-outlet>

{path: '/examplePath', component: secondComponentComponent, outlet: 'secondRouterOutlet'}

此stackoverflow answer可能会得到帮助

Answer 2

在尝试了许多不同的方法之后，对我有用的是将core-routing.module.ts更改为具有一条路由，并将延迟加载的模块作为子模块包含在其中：

const routes: Routes = [
  {
    path: '',
    component: CoreComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule', canLoad: [AuthGuard] },
      { path: 'customers', loadChildren: '../customers/customers.module#CustomersModule', canLoad: [AuthGuard] },
      { path: 'history', loadChildren: '../history/history.module#HistoryModule', canLoad: [AuthGuard] },
      { path: 'processing', loadChildren: '../processing/processing.module#ProcessingModule', canLoad: [AuthGuard] },
      { path: '**', redirectTo: 'dashboard' }
    ]
  }
];

希望这可以帮助尝试实现相同功能的人。

Answer 3

嗯，我参加聚会很晚，但是过去5天都遇到了同样的问题。在此处张贴以防万一。

序言，不要将每个@Asanka响应中的命名出口与嵌套出口混淆。我第一次阅读有关堆栈溢出的内容时，并未意识到两者之间的区别，因此错误地尝试命名插座并了解如何路由至插座。

我通过浏览这篇出色的文章找到了答案（我不是作者，也不隶属于他们）：

https://medium.com/@shairez/angular-routing-a-better-pattern-for-large-scale-apps-f2890c952a18

特别感兴趣的是链接的Stackblitz项目（请参阅choose-address-routing.module.ts第9行，该行显示了第二层延迟加载的模块路由需要完全限定的路由）。

我也花了一天的时间阅读本文的每一行（全线程）以阐明我的理解：

https://blog.angularindepth.com/the-three-pillars-of-angular-routing-angular-router-series-introduction-fb34e4e8758e

解决我的错误的复杂性来自两个问题：

我在应用程序的另一部分中引用了我的延迟加载模块。最低级别的延迟加载模块具有路由“重定向”。因为它已经被加载，所以重定向是在路由树的根级别捕获的，设置了最顶层路由器出口（在您的示例中为app.component.html的出口）的内容，而不是嵌套出口（您的核心） .component.html）。看起来好像正在运行，但在定位正确的插座时遇到了问题，但不是，不是吗！
第二个原因是我的最低级别的延迟加载路由器模块未使用完全限定的路由，所以当我解析＃1点时，我得到了一个空的嵌套出口，但没有错误让我知道不存在任何路由。 / li>

根据我的解决方案，您的dashboard-routing.module.ts如下所示：

const dashboardRoutes: Routes = [
  { path: '',  , pathMatch: 'full', redirectTo: 'dashboard/child-view' },
  { path: 'dashboard/child-view',  component: DashboardComponent, pathMatch: 'full' }
];

看到上面的“ dashboard/child-view”！这就是到第二级路由器出口（由第二级延迟加载模块填充）的完全限定路线的意思。

我希望我的5天回来！我会接受设拉子的渴望听到这是否对您有帮助！

有延迟加载问题的角嵌套路由

3 个答案: