Angular|Angular 2+ 监听路由变化动态设置页面标题
现在很多web网站都采用了SPA单页应用，单页面有很多优点：用户体验好、应用响应快、对服务器压力小 等等。同时也有一些缺点：首次加载资源太多，不利于SEO，前进、后退、地址栏需要手动管理。今天我们实现Angular单页面应用中路由变化设置页面标题，来优化用户的用户体验。可以先去掘金看下效果。稀土掘金
在AngularJS（1.x）中动态设置页面标题通常是通过一个全局$rootScope对象来完成的，通过$rootScope对象监听路由变化获取当前路由信息并映射到页面标题。在Angular（v2 +）中，解决起来要比1.x容易得多，我们可以通过注入一个provider，在路由变化事件中使用provider提供的API来动态更新页面标题。
Title Service
在angular中，我们可以通过Title来设置页面标题。我们从platform-browser导入Title, 同时也导入Router。
文章图片
导入之后，我们在组件的构造函数中注入他们
文章图片
在使用Title之前，我们先看下Title是如何定义的
文章图片
Title类有两个方法，一个用来获取页面标题getTitle， 一个是用来设置页面标题的setTitle
要更新页面标题，我们可以简单的调用setTitle方法:
文章图片
文章图片
文章图片
文章图片
文章图片
【Angular|Angular 2+ 监听路由变化动态设置页面标题】
文章图片
文章图片
推荐阅读
- angular2内置管道
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- day|day 28 设置路由表
- vue_day05
- Angular|Angular 用service 在组件间传递数据
- Angular|Angular 日期管道 datePipe - dateFormat
- linux监听蒲公英线程，重启
- 思科路由映射表控制BGP路径的方法和实例
- SwiftUI|SwiftUI Button监听点击和释放消息 实现照片切换 （教程含源码 技术大全）
- 学习angular笔记