現(xiàn)在很多web網(wǎng)站都采用了SPA單頁應(yīng)用，單頁面有很多優(yōu)點：用戶體驗好、應(yīng)用響應(yīng)快、對服務(wù)器壓力小 等等。同時也有一些缺點：首次加載資源太多，不利于SEO，前進、后退、地址欄需要手動管理。今天我們實現(xiàn)Angular單頁面應(yīng)用中路由變化設(shè)置頁面標(biāo)題，來優(yōu)化用戶的用戶體驗。可以先去掘金看下效果。稀土掘金

在AngularJS（1.x）中動態(tài)設(shè)置頁面標(biāo)題通常是通過一個全局$rootScope對象來完成的，通過$rootScope對象監(jiān)聽路由變化獲取當(dāng)前路由信息并映射到頁面標(biāo)題。在Angular（v2 +）中，解決起來要比1.x容易得多，我們可以通過注入一個provider，在路由變化事件中使用provider提供的API來動態(tài)更新頁面標(biāo)題。

Title Service

在angular中，我們可以通過Title來設(shè)置頁面標(biāo)題。我們從platform-browser導(dǎo)入Title, 同時也導(dǎo)入Router。

導(dǎo)入之后，我們在組件的構(gòu)造函數(shù)中注入他們

在使用Title之前，我們先看下Title是如何定義的

Title類有兩個方法，一個用來獲取頁面標(biāo)題getTitle， 一個是用來設(shè)置頁面標(biāo)題的setTitle

要更新頁面標(biāo)題，我們可以簡單的調(diào)用setTitle方法: