Angular 18 系列（二十一）Router 路由变化事件

小渣渣

需求：检测 Angular Route 路由的变化，切换导航栏的菜单后，当路由加载完成后，通过注入 Title 来动态修改网页的标题。

为此，我们将创建一个简单的 App 组件并将其 Router 注入 constructor：

登录可见。

此类 RouterEvent 作为这些路由器相关事件的基类（按字母顺序排列）：

• GuardsCheckEnd
• GuardsCheckStart
• NavigationCancel
• NavigationEnd
• NavigationError
• NavigationSkipped
• NavigationStart
• ResolveEnd
• ResolveStart
• RoutesRecognized
  

参考：超链接登录可见。

上述类别列表是路由器可能发出的潜在结果。例如，如果用户开始导航到新视图，事件 NavigationStart 和 NavigationEnd 将被调用。

为了获取这些信息（以及更多信息），我们可以订阅 router.events 事件，代码如下：

登录可见。

通过 if 条件来过滤事件，代码如下：

登录可见。

如果你只想要一个事件，例如：NavigationEnd，我们可以filter()从 RxJS 引入并传输 Observable，以便仅在特定事件上发出：

登录可见。

修改网页标题代码：

登录可见。

当点击菜单切换路由的时候，效果图如下：



（完）