代码之家 › 专栏 › 技术社区 › Phil

角度:嵌套路由器出口始终被忽略

angular-routing angular

0

Phil · 技术社区 · 7 年前

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

这是my 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'
  }
]),

我尝试使用命名的插座,但没有成功。当我跟踪记录路由器状态时,解析似乎是正常的,所以我在这里有点迷茫

1 回复 | 直到 7 年前

1

SiddAjmera 7 年前

使 DataComponent 装载 router-outlet HomeComponent(这意味着您必须添加 <router-outlet></router-outlet> 给你 HomeComponent 模板),您将不得不 data 作为一个孩子 '' 路径

pathMatch: 'full' 从你的 '' '' 如果已匹配,它将尝试检查是否有匹配的子路由。

最后,我不确定这是否是一个打字错误,但路径应该是 Data .

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