前言
在一Angular APP中若有不同功能導向的服務,希望在不同頁面時可以載入不同favicon與標題
修改標題還算簡單,Angular原生就提供服務,直接注入馬上使用就好
但圖標(facicon)就沒那麼好了,不過自己實作也算簡單,就是最基本的操作dom來改變就好
作法
第一步:在index.html
中,將圖標加上id屬性
1 | <link id="appFavicon" rel="icon" type="image/x-icon" href="favicon.ico"> |
第二步:將欲改變的圖標放入assets的目錄裡
比如共有faviconA.ico、faviconB.ico、faviconC.ico共三個icon要動態變換
則將3個圖標都放進去
也就是ng serve
啟動後,輸入http://localhost:4200/assets/faviconA.ico
至少要能看得到圖片
※Angular預設port是4200,網址會依您服務設定的port而有所不同
第三步:在app.module.ts注入title服務 (若不打算變更標題,可跳過此步)
若不打算變更標題,可跳過此步
1 | import { NgModule } from '@angular/core'; |
第四步:在要載入的component,寫在ngOnInit
component最上方先匯入Angular模組
Title為Angular原生提供用於修改標題的service
DOCUMENT則是Angular提供用來操作dom的功能1
import { DOCUMENT, Title } from "@angular/platform-browser";
在constructor
注入服務後,接著在ngOnInit()
裡寫上功能
1 | ({ |
參考資料
stackoverflow/Change favicon icon as per configuration
Angular官方文件/動態調整title