1

在这个场景中，我有一个包含 3 条路由的主页（每个懒加载主页的子页面）。 在此处输入图像描述

这里的辅助组件有一个主要出口和其他辅助作为

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

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

在此处输入图像描述

现在我的辅助路由完美加载，我能够在主插座中路由有任何问题。但是，一旦我尝试像这样在辅助插座中加载路线 在此处输入图像描述

并尝试使用

在此处输入图像描述 （辅助路线有一个孩子作为自己的，我试图加载另一条路线作为同一个辅助的另一个孩子）我得到错误：

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

由于我无法看到任何有关如何加载和路由辅助路由的文档，因此我不知道如何进行延迟加载，最终找出了如何使这项工作。

我到底哪里错了？

这是我的项目结构 在此处输入图像描述

4

2 回答 2

2

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

app.routes

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 {}

home.routes

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必须看起来像这样

[routerLink]="['/home', { outlets: { popup: ['form'] } }]"
于 2018-11-15T23:04:04.057 回答
0

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

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

于 2017-01-11T09:23:36.413 回答