组件的角度路由答案

【问题标题】：Angular routing for the component组件的角度路由
【发布时间】：2021-11-09 20:14:53
【问题描述】：

我在 YouTube 上观看有关 Angular 路由的视频。 app-routing.module file.ts，我省略了导入

const routes: Routes = [
  {
    path: '', component: MainLayoutComponent, children: [
      {path: '', redirectTo: '/', pathMatch: 'full'},
      {path: '', component: MainPageComponent},
      {path: 'product/:id', component: ProductPageComponent},
      {path: 'cart', component: CartPageComponent}
    ]
  },
  {
    path: 'admin', loadChildren: './admin/admin.module#AdminModule'
  }
];

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

接下来，在there.ts中创建一个单独的admin.module，实现另一个路由

@NgModule({
    declarations: [
        AdminLayoutComponent,
        LoginPageComponent,
        DashboardPageComponent,
        AddPageComponent,
        EditPageComponent,
        OrdersPageComponent,

    ],
    imports:[
        CommonModule,
        RouterModule.forChild([
            {
                path: '', component: AdminLayoutComponent, children: [
                    {path: '', redirectTo: '/admin/login', pathMatch: 'full'},
                    {path: 'login', component: LoginPageComponent},
                    {path: 'dashboard', component: DashboardPageComponent},
                    {path: 'add', component: AddPageComponent},
                    {path: 'orders', component: OrdersPageComponent},
                    {path: 'product/:id/edit', component: EditPageComponent},
                ]
            }
        ])
    ],
    exports: [RouterModule]
})

export class AdminModule{
    
}

根据教训，当他去地址localhost:4200/admin时，他被抛出到页面localhost:4200/admin/login。并把我扔到 localhost:4200

我错过了什么？

【问题讨论】：

延迟加载的新语法是loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)。参考angular.io/guide/lazy-loading-ngmodules。另外，尝试用redirectTo: 'login'替换redirectTo: '/admin/login'
另外to generate pages 尝试使用以下命令：ng g module login --module account --route login。但是，从AccountModule 中删除imports: [LoginModule]（例如）

标签： angular

【解决方案1】：

你的app-routing.module.ts应该是这样的：

const routes: Routes = [
  {
    path: '', component: MainLayoutComponent, children: [
      {path: '', redirectTo: '/', pathMatch: 'full'},
      {path: '', component: MainPageComponent},
      {path: 'product/:id', component: ProductPageComponent},
      {path: 'cart', component: CartPageComponent}
    ]
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module#AdminModule').then(m => m.AdminModule)
  }
];

admin.module.ts:

const routes: Routes = [
{
   path: '', component: AdminLayoutComponent, children: [
     {path: '', redirectTo: 'login', pathMatch: 'full'},
     {path: 'login', component: LoginPageComponent},
     {path: 'dashboard', component: DashboardPageComponent},
     {path: 'add', component: AddPageComponent},
     {path: 'orders', component: OrdersPageComponent},
     {path: 'product/:id/edit', component:EditPageComponent},
   ]
}];

查看文档：https://angular.io/guide/lazy-loading-ngmodules

【讨论】：