Question

您是否知道如果始终忽略我的第二个路由器出口，我的configuratoin可能出什么问题？这是我的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的DataComponent中加载router-outlet（这意味着您还必须向<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'
      }
    ]
  },
  ...
]),

角度：始终忽略嵌套的路由器出口

1 个答案: