Angular Academy · 课时

路由器事件与导航

Q: 「路由器事件与导航」这节课中我会学到什么？

响应导航生命周期事件 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

响应导航生命周期事件

第 4 / 4 课13 个步骤

路由器事件与导航 是 CoddyKit 上的免费 Angular Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

路由器事件流

Router.events 是一个可观察对象，会在导航生命周期的各个阶段发出事件：开始、识别、守卫检查、解析和结束。订阅它即可全局响应导航。

关键事件类型

常见事件包括：NavigationStart、NavigationEnd、NavigationCancel 和 NavigationError。每个事件都是一个类实例，您可以对其进行筛选。

监听 NavigationEnd

使用 filter 和 instanceof 检查，将事件流筛选为特定的事件类型。

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

const router = inject(Router);
router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));

全局加载指示器

在 NavigationStart 与 NavigationEnd、NavigationCancel 或 NavigationError 之间显示加载图标。

router.events.subscribe(e => {
  if (e instanceof NavigationStart) this.loading = true;
  if (e instanceof NavigationEnd ||
      e instanceof NavigationCancel ||
      e instanceof NavigationError) this.loading = false;
});

导航时滚动到顶部

每次导航成功后重置滚动位置。（内置的 scrollPositionRestoration 也可以实现此功能。）

router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));

分析页面跟踪

NavigationEnd 是向分析系统记录页面浏览的理想切入点。

router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));

编程式导航

router.navigate 接收命令数组；router.navigateByUrl 接收完整的 URL 字符串。两者都会返回一个 Promise，其结果表示导航是否成功。

router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');

const ok = await router.navigate(['/home']);
console.log('success?', ok);

相对导航

使用 relativeTo 相对于当前路由进行导航，例如从子组件中导航。

const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });

routerLink 与 active 状态

在模板中，routerLink 以声明方式处理导航，而 routerLinkActive 会为 active 链接添加 CSS 类。

<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
   routerLinkActive="active">Profile</a>

NavigationError 处理

订阅 NavigationError，以处理失败的导航（例如解析器失败或延迟加载失败），并向用户显示友好的消息。

router.events.pipe(
  filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));

类型化事件筛选

Angular 还提供 RouterEvent 类型；在 filter 中使用类型守卫谓词，可以让订阅者获得正确类型的事件，而无需进行类型转换。

快速检查

测试您对路由器事件的理解。

在交互式课程中回答

回顾：路由器事件与导航

Router.events 提供导航生命周期。

筛选 NavigationStart、End、Cancel 或 Error。
驱动加载图标、滚动重置和分析功能。
通过 navigate、navigateByUrl 或 routerLink 进行导航。

您已完成 Angular 路由器高级课程。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 38
课程: 144

免费开始学习查看完整课程

常见问题解答

「路由器事件与导航」课时是免费的吗？

是的 — 「路由器事件与导航」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「路由器事件与导航」这节课中我会学到什么？

响应导航生命周期事件你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「路由器事件与导航」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy