如何在 Angular 中使用路由？

推荐答案

在 Angular 中使用路由的步骤如下：

1. 配置路由模块：首先，需要在 AppModule 中导入 RouterModule 并定义路由配置。通常会在一个单独的路由模块（如 AppRoutingModule）中完成这些配置。

   // www.javascriptcn.com code example
   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 },
     { path: '**', redirectTo: '' } // 通配符路由，匹配任何未定义的路由
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }

2. 在根模块中导入路由模块：确保在 AppModule 中导入 AppRoutingModule。

   // www.javascriptcn.com code example
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, AppRoutingModule],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

3. 在模板中使用路由：使用 routerLink 指令来导航到不同的路由，并使用 <router-outlet> 来显示路由对应的组件。

   <nav>
     <a routerLink="/">Home</a>
     <a routerLink="/about">About</a>
   </nav>
   <router-outlet></router-outlet>

4. 编程式导航：在组件中使用 Router 服务进行编程式导航。

   import { Router } from '@angular/router';
   
   constructor(private router: Router) {}
   
   navigateToAbout() {
     this.router.navigate(['/about']);
   }

本题详细解读

1. 路由配置

在 Angular 中，路由配置是通过 Routes 数组来定义的。每个路由对象包含 path 和 component 属性，path 是 URL 路径，component 是该路径对应的组件。

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

2. 路由模块

为了保持代码的模块化和可维护性，通常会将路由配置放在一个单独的路由模块中。这个模块通过 RouterModule.forRoot(routes) 方法来注册路由配置。

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

3. 路由出口

<router-outlet> 是 Angular 路由的核心指令之一，它用于在模板中标记路由组件的位置。当用户导航到某个路由时，对应的组件会显示在 <router-outlet> 的位置。

<router-outlet></router-outlet>

4. 路由链接

routerLink 是 Angular 提供的指令，用于在模板中创建导航链接。它可以绑定到路由路径，用户点击链接时会导航到对应的路由。

<a routerLink="/">Home</a>
<a routerLink="/about">About</a>

5. 编程式导航

除了使用 routerLink 进行导航外，还可以在组件中通过 Router 服务进行编程式导航。Router 服务提供了 navigate 方法，可以在代码中动态导航到指定的路由。

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

constructor(private router: Router) {}

navigateToAbout() {
  this.router.navigate(['/about']);
}

6. 通配符路由

通配符路由 ** 用于匹配任何未定义的路由。通常用于处理 404 页面或重定向到默认页面。

{ path: '**', redirectTo: '' }

7. 懒加载

对于大型应用，可以使用懒加载来按需加载模块，从而减少初始加载时间。懒加载的路由配置如下：

{ path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }

8. 路由守卫

路由守卫用于在导航到某个路由之前或之后执行一些逻辑，例如权限检查。常见的路由守卫有 CanActivate、CanDeactivate 等。

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

9. 路由参数

可以通过路由参数传递数据。路由参数可以通过 ActivatedRoute 服务在组件中获取。

{ path: 'detail/:id', component: DetailComponent }

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
}

10. 查询参数

查询参数可以通过 queryParams 属性传递，并在组件中通过 ActivatedRoute 服务获取。

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

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const query = this.route.snapshot.queryParams['q'];
}