返回

角度：初学者指南

前端

理解基本概念

在开始之前，需要了解几个关键术语。Angular 应用程序主要由组件和模块构成，而路由则是让这些组件能够在不同 URL 之间切换的关键技术。

组件（Component）

组件是Angular应用程序的基本构建块，每个组件包括一个模板、样式表和一个类文件，用于显示视图并处理用户交互。

模块（Module）

模块是一组相关的功能或组件的集合。在Angular中，路由配置通常位于主应用模块或特定功能的子模块中。

安装与设置

要开始使用Angular路由，在项目中需要首先安装@angular/router包：

npm install @angular/router --save

接下来，导入并注册RouterModule：

  1. 在app.module.ts文件中添加以下内容：

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

  2. 定义路由路径和组件映射关系：

    const appRoutes: Routes = [
  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent }
];

  3. 将RouterModule.forRoot(appRoutes)添加到@NgModule的imports数组中，初始化路由配置。

配置导航和视图

在应用模板中使用router-outlet指令来显示与当前激活路由对应的组件：

<router-outlet></router-outlet>

使用RouterLink指令创建链接，这样可以避免直接刷新页面：

<a routerLink="/heroes">Heroes</a> <br/>
<a routerLink="/dashboard">Dashboard</a>

解析子路由

有时需要处理嵌套路由。可以在路由定义中包含children属性来配置嵌套路径和组件。

  1. 修改appRoutes数组，添加带children的路由：

    const appRoutes: Routes = [
  { path: '', redirectTo: '/heroes', pathMatch: 'full' },
  {
    path: 'heroes',
    component: HeroesComponent,
    children: [
      { path: ':id', component: HeroDetailComponent }
    ]
  },
  { path: 'dashboard', component: DashboardComponent }
];

  2. 在HeroesComponent模板中使用子路由：

    <router-outlet></router-outlet>

  3. 为每个英雄添加详细信息链接，利用路由器参数：

    <a *ngFor="let hero of heroes" routerLink="/heroes/{{hero.id}}">
  {{hero.name}}
</a>

路由守卫

路由守卫是Angular提供的机制，用于控制导航的执行。比如用户访问受保护路径时需要身份验证。

创建一个简单的守卫

  1. 使用CLI生成一个新的服务：

    ng generate service auth-guard

  2. 在auth.guard.ts中定义逻辑：

    import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 检查用户是否认证
    return true; // 根据实际认证逻辑返回true或false
  }
}

  3. 将守卫添加到路由定义：

    const appRoutes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] },
];

通过以上步骤，读者可以掌握基本的Angular路由技术。这有助于构建动态、响应式的单页面应用（SPA）。根据具体需求进一步探索更多高级特性，如懒加载模块等。

相关资源

注意，以上链接为假设示例，实际使用时请参阅最新版本的Angular文档。