Question

这里的情景，我有一个有3条路线的主页（每个懒人加载的主页的孩子）。

这里辅助部件有一个主要插座和其他辅助部件

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

这就是我的mainpage.route文件的外观

现在我的辅助路线装载完美，并且能够在主要出口处路线出现任何问题。但是一旦我尝试像这样在辅助插座中加载路线

＆安培;尝试使用

导航它们

（辅助路线有一个孩子作为自己的，我试图加载另一个路线作为同一辅助的另一个孩子）我得到错误：

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mainpage/aux'

因为我无法看到任何关于如何加载和路由辅助路由的文档延迟加载我的智慧结束了解如何使这项工作。

我到底哪里错了？

这是我的项目结构

Answer 1

您不应该也不能在延迟加载路径中包含outlet:参数。延迟加载的路线被设计隐藏在急切加载的应用程序之外。

相反，您应该为插座组件构建一个模块，它应该有自己的路由配置。在该路由器配置中，您可以设置到辅助插座的路由。

Answer 2

您没做错什么，这只是角度路由器中的一个长期错误，已在angular@6.1中得到了（部分）修复。部分原因是，为了实现您的目标，您必须在应用程序路由中将延迟加载的模块配置为未命名的路由，而在延迟加载的模块路由器配置中将父路由命名为：

应用路线

ggplot(data = housing_df, aes(x = month, y = salesdiff, higherlower)) +
  geom_col(data = filter(housing_df, higherlower == "higher"), aes(y = salesdiff, fill = higherlower)) +
  geom_col(data = filter(housing_df, higherlower == "lower"), aes(y = salesdiff, fill = higherlower)) +
  scale_fill_manual(values = c("higher" = "blue", "lower" = "red")) +
  theme_bw() +
  theme(legend.position = "none") # remove legend

家庭路线

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    /* no name for lazy loaded route */
    path: '',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    /* you can add multiple empty routes without conflicts */
    path: '',
    loadChildren: './about/about.module#AboutModule'
  }
];

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

您的家庭组件模板如下所示：

export const homeRoutes: Routes = [
  {
    /* your lazy loaded module route needs to be named */
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: '',
        component: HomeListComponent
      },
      {
        path: 'form',
        component: HomeFormComponent,
        outlet: 'popup'
      }
    ]
  }
];

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

和<router-outlet></router-outlet> <router-outlet name="popup"></router-outlet>必须看起来像这样

routerLink

延迟加载辅助路线

2 个答案: