简述Angular2中路由的工作原理？

八股文_Angular面试题 0 49

参考回答

Angular 2 中的路由通过 Router 模块 来管理应用的页面导航。它的工作原理如下：

路由配置：开发者定义一个路由配置表，将路径与对应的组件关联起来。
URL 解析：当用户访问某个 URL 时，Angular 的路由器会解析该 URL，并找到匹配的路由。
组件加载：根据路由配置加载对应的组件并将其渲染到 <router-outlet> 中。
导航守卫：在路由激活前或离开时，导航守卫可用于权限检查或取消导航。
动态参数：支持从 URL 中提取参数并传递给组件，用于动态内容加载。

Angular 路由的核心是基于组件的导航，通过 URL 与视图的绑定实现高效的单页面应用（SPA）路由功能。

详细讲解与拓展

1. 核心概念和组成部分

Angular 2 的路由系统由以下核心部分组成：
– RouterModule：Angular 提供的路由模块，用于配置和管理路由。
– Routes：一个数组，其中每个路由对象定义路径、组件及其他属性。
– RouterOutlet：一个占位符指令，用于显示匹配的路由组件。
– RouterLink：一个指令，用于在模板中创建导航链接。
– ActivatedRoute：用于获取当前激活的路由信息（如参数、查询参数等）。

2. 路由的工作原理

(1) 路由配置

开发者通过 RouterModule.forRoot() 方法定义全局路由。每个路由定义由 path 和 component 组成：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // 默认路径
  { path: 'about', component: AboutComponent }, // '/about'路径
];

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

(2) 导航与 URL 解析

当用户点击链接（<a routerLink="/about">）或通过 router.navigate() 方法导航时：
1. 路由器解析当前的 URL。
2. 在路由配置中查找与 URL 匹配的路径。
3. 加载与匹配路径关联的组件。

(3) 视图呈现

路由器将匹配的组件动态加载并插入到 <router-outlet> 占位符中，替换之前的内容：

<router-outlet></router-outlet>

(4) 支持动态参数

可以在路径中定义动态参数，通过 ActivatedRoute 访问参数：

{ path: 'product/:id', component: ProductComponent }

在组件中：

import { ActivatedRoute } from '@angular/router';

export class ProductComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id'); // 获取动态参数
    console.log(id);
  }
}

3. 路由守卫

Angular 提供了导航守卫（Guards）来控制路由的访问权限。常用守卫包括：
– CanActivate：在激活路由前检查是否有权限进入。
– CanDeactivate：在离开路由时检查是否允许离开。

示例：实现路由守卫

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

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const isAuthenticated = !!localStorage.getItem('token'); // 检查用户是否登录
    if (!isAuthenticated) {
      this.router.navigate(['/login']); // 重定向到登录页面
    }
    return isAuthenticated;
  }
}

在路由配置中：

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }

4. 辅助功能与扩展

懒加载（Lazy Loading）

懒加载可以将路由模块按需加载，减少初始加载时间：

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.module').then((m) => m.AdminModule),
  },
];

查询参数

支持通过 queryParams 传递附加参数：

this.router.navigate(['/search'], { queryParams: { q: 'angular' } });

获取查询参数：

this.route.queryParams.subscribe(params => {
  console.log(params['q']);
});

总结

Angular 2 的路由系统提供了强大的功能，包括基于组件的导航、动态参数、守卫、懒加载等，满足现代单页面应用的复杂需求。其通过清晰的配置、强大的扩展性和高效的运行机制，帮助开发者实现高性能、可维护的路由管理。