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笔记