Angular動態修改網頁圖標(favicon)與標題

前言

在一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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { NgModule } from '@angular/core';
+import { BrowserModule, Title } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent
],
+ providers: [
+ Title
+ ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

第四步:在要載入的component,寫在ngOnInit

component最上方先匯入Angular模組

Title為Angular原生提供用於修改標題的service
DOCUMENT則是Angular提供用來操作dom的功能

1
import { DOCUMENT, Title } from   "@angular/platform-browser";

constructor注入服務後,接著在ngOnInit()裡寫上功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@Component({
selector: "home",
templateUrl: "./home.component.html",
styles: ["./home.component.css"]
})

export class HomeComponent implements OnInit {

constructor(
@Inject(DOCUMENT) private doc,
private titleService: Title // 不打算修改標題的話,不必注入
) {}

ngOnInit() {
this.titleService.setTitle("動態修改title!"); // 不想要修改標題的話,刪除此行
this.doc
.getElementById("appFavicon")
.setAttribute("href", "/assets/faviconA.ico");
}
}

參考資料

stackoverflow/Change favicon icon as per configuration
Angular官方文件/動態調整title