Question

我有以下路由代码：

export const AppRoutes: Routes = [
  {
    path: '',
    redirectTo: 'landing',
    pathMatch: 'full'
  },
  {
    path: 'landing',
    component: AdminLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './pages/landing/landing.module#LandingModule'
      }
    ]
  },
  {
    path: '**',
    redirectTo: 'landing'
  }
];

这里要注意的是LandingModule是父级的子级，即AdminLayoutComponent。

如果我输入完整的URL（http://mypage.com/landing），则会显示“完整页面”。换句话说，呈现AdminLayoutComponent以及子级LandingModule。

但是，如果我只输入站点的根URL（http://mypage.com），并允许redirectTo加载/ landing页面，则唯一呈现的是LandingModule，而不是父AdminLayoutComponent。

关于这种情况为什么发生或如何解决的任何想法？

Answer 1

我不知道您的示例到底发生了什么，但这是我在项目中采用的方法（适用于您的方案）：

export const AppRoutes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      { path: 'landing', loadChildren: './pages/landing/landing.module#LandingModule' },
      { path: '', redirectTo: "landing", pathMatch: "full" }
    ]
  },
  {
    path: '**',
    redirectTo: 'landing'
  }
];

希望这会有所帮助。

Answer 2

export const AppRoutes: Routes = [
  {
    path: '',
    loadChildren: './pages/landing/landing.module#LandingModule'
  },

];

在landing-routing.module中

  {
      path: "",
      component: landingComponent
    },

尝试

Angular 8，延迟加载父级和子级组件作为默认路由

2 个答案: