Angular新手求助：Web应用基础结构搭建与路由学习

一、组件存放结构建议 #

• 全局页面组件：login、register属于独立的页面级组件，直接放在src/app/components目录下即可，也可以专门新建src/app/pages文件夹来区分页面组件和复用性子组件，新手初期用前者更易上手。
• Home页子组件：donations、tournaments这类仅在Home页面内展示的组件，建议放在Home组件的专属子目录中，比如：

  src/app/components/
  ├── login/
  ├── register/
  └── home/
      ├── home.component.ts
      ├── home.component.html
      ├── donations/
      │   └── donations.component.ts
      └── tournaments/
          └── tournaments.component.ts
  

  这种结构的好处是清晰区分组件的从属关系，避免全局组件目录杂乱，后续如果这些子组件需要复用，再迁移到外层components目录即可。

二、Angular路由入门指南 #

基础配置步骤 #

1. 在app.module.ts中导入路由模块：

   import { RouterModule, Routes } from '@angular/router';
   

2. 定义路由规则，包含主路由和Home页的子路由：

   const routes: Routes = [
     { path: 'login', component: LoginComponent },
     { path: 'register', component: RegisterComponent },
     { 
       path: 'home', 
       component: HomeComponent,
       children: [
         { path: 'donations', component: DonationsComponent },
         { path: 'tournaments', component: TournamentsComponent },
         { path: '', redirectTo: 'donations', pathMatch: 'full' } // Home默认展示捐款页面
       ]
     },
     { path: '', redirectTo: '/login', pathMatch: 'full' }, // 初始路由跳转登录页
     { path: '**', redirectTo: '/login' } // 未知路由跳转登录页
   ];
   

3. 在@NgModule的imports中注册路由：

   imports: [RouterModule.forRoot(routes)]
   

4. 在页面中添加路由出口：
   • 在app.component.html中添加主路由出口：<router-outlet></router-outlet>
   • 在home.component.html中添加子路由出口，用于展示donations、tournaments这类子组件：<router-outlet></router-outlet>
5. 导航栏跳转使用routerLink指令：

   <!-- 示例：Home页导航栏跳转 -->
   <a routerLink="/home/donations">捐款</a>
   <a routerLink="/home/tournaments">赛事</a>
   

学习资源推荐 #

优先看Angular官方文档的路由入门章节，从基础路由配置、子路由、路由链接、路由守卫这些核心知识点入手，跟着文档里的示例代码一步步实操；另外官方的「Tour of Heroes」教程项目里有完整的路由实现案例，能帮你快速理解路由在实际项目中的用法。

内容的提问来源于stack exchange，提问作者Hello World Techsupport