Angular：嵌套的路由器插座总是被忽略

Question

如果我的第二个路由器插座总是被忽略，你知道我的配置可能有什么问题吗？这是我的 app.module 路由（app.component 有一个路由器出口）：

const routes: Routes = [
  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule',
    canLoad: [AuthorizationGuard]
  },
  {
    path: 'please-login',
    component: PleaseLoginComponent
  },
  {
    path: '**',
    redirectTo: 'please-login'
  }
];

这是我的 home.module-routing（HomeComponent 有另一个路由器出口）：

RouterModule.forChild([
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    children: [
      {
        path: 'welcome',
        component: WelcomeComponent
      }
    ]
  },
  {
    path: '**',
    redirectTo: 'welcome'
  },
  {
    path: 'Data',
    loadChildren: '@libs/data#DataModule'
  }
]),

我可以毫无问题地加载 DataModule；它引导我到 /home/data/blabla。但是（！）它将 DataComponent 插入到第一个路由器插座中。第二个（因此应该围绕 DataComponent 的整个 HomeComponent）被忽略。也就是说，除非我导航到 /home，否则它会显示，但正如预期的那样，里面没有 DataComponent。这意味着我只能以独占方式使用这两个组件，而不能嵌套使用。

我尝试使用命名插座，但没有成功。当我跟踪记录路由器状态时，解析似乎没问题，所以我有点迷失在这里

Answer 1

要在 HomeComponent 的 router-outlet 中加载 DataComponent（这意味着您还必须将 <router-outlet></router-outlet> 添加到您的 HomeComponent 模板中），您必须将 data 设置为'' 路径的子节点。

您必须做的另一件事是从您的 '' 路由中删除 pathMatch: 'full'。它会做的是，尝试以块的形式匹配路径，即如果匹配''，它将尝试检查任何匹配的子路由。

最后，我不确定是不是拼写错误，但路径应该是data 而不是Data。

所有这些都将转化为类似这样的代码：

RouterModule.forChild([
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'data',
        loadChildren: '@libs/data#DataModule'
      },
      {
        path: 'welcome',
        component: WelcomeComponent
      },
      {
        path: '**',
        redirectTo: '/welcome',
        pathMatch: 'full'
      }
    ]
  },
  ...
]),