Question

在Angular 8中，我创建了一个具有主路由的应用程序，并且在主路由内部有一个具有另一个子路由的组件。

我有几个问题：插入现有路径时，URL似乎正确，但是未显示该组件，而如果插入错误的URL，则404重定向生效。

父级路由有效，而子级路由无效。

我发现另一个问题是在链接中，我无法在链接“父亲/儿子的名字”中插入，仅出现儿子的名字。手动输入父亲的名字对我来说似乎是：“父亲/父亲/儿子”。

我在下面附上代码

App.Routing.Module.ts

    const routes: Routes = [
  {path: 'main', component: MainComponent, loadChildren: () => import('./main/main.module').then(m=>m.MainModule), canActivate: [AuthGuard]},

  {path: '', component: MainComponent, canActivate: [AuthGuard]},
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},

  //THIS REDIRECT TO HOME
  {path: '**', redirectTo: '/login'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes,{enableTracing: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Main.Routing.Module.TS

const routes: Routes = [{
  path: '', component: ColumnChartComponent,  children:[
    {path: 'pie', component: PieChartComponent},
    {path: 'dashboard', component: LayoutDashboardComponent},
    {path: '**', redirectTo: '', pathMatch: 'full'}
  ]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MainRoutingModule { }

预先感谢您的帮助

Answer 1

我非常确定您不能有一个延迟加载的路由（您的loadChildren（）），而且该路由字符串中还有一个组件。所以请更改

{path: 'main', component: MainComponent, loadChildren: () => import('./main/main.module').then(m=>m.MainModule), canActivate: [AuthGuard]}

收件人：

{path: 'main', loadChildren: () => import('./main/main.module').then(m=>m.MainModule), canActivate: [AuthGuard]}

嵌套路由器：父级路由有效，子级路由器无

1 个答案: