现在很多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方法: