如何在 Angular 中使用路由？-JavaScript中文网-JavaScript教程资源分享门户

如何在 Angular 中使用路由？

推荐答案

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

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

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------

----- ------- ------ - -
  - ----- --- ---------- ------------- --
  - ----- -------- ---------- -------------- --
  - ----- ----- ----------- -- - -- ----------------
--

-----------
  -------- -------------------------------
  -------- --------------
--
------ ----- ---------------- - -

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

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - ------------ - ---- ------------------

-----------
  ------------- ---------------
  -------- --------------- ------------------
  ---------- ---
  ---------- --------------
--
------ ----- --------- - -

在模板中使用路由：使用 routerLink 指令来导航到不同的路由，并使用 <router-outlet> 来显示路由对应的组件。
```
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>
```

编程式导航：在组件中使用 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'];
}

纠错
反馈