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

前言

在一Angular APP中若有不同功能導向的服務，希望在不同頁面時可以載入不同favicon與標題
修改標題還算簡單，Angular原生就提供服務，直接注入馬上使用就好
但圖標(facicon)就沒那麼好了，不過自己實作也算簡單，就是最基本的操作dom來改變就好

作法

第一步：在index.html中，將圖標加上id屬性

<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服務 (若不打算變更標題，可跳過此步)

若不打算變更標題，可跳過此步

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的功能

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

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

@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