如何在运行时通过服务修改Angular应用的Favicon？

好问题！我来给你明确说明一下：

• Angular官方并没有提供类似Title服务的专门用于修改文档Favicon的内置服务，你在官方文档里找不到相关内容是完全正常的，确实没有这个官方封装。

不过不用担心，既然你知道原生JavaScript可以实现，我们完全可以自己封装一个风格和Title服务一致的自定义服务，这样在Angular项目里用起来会非常顺手。

自定义Favicon服务示例 #

你可以创建一个全局可用的服务，封装favicon的获取和修改逻辑：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FaviconService {
  private faviconElement: HTMLLinkElement;

  constructor() {
    // 先尝试获取页面中已存在的favicon元素，不存在则创建新的
    this.faviconElement = document.querySelector('link[rel="icon"]') || this.createFaviconElement();
  }

  private createFaviconElement(): HTMLLinkElement {
    const linkEl = document.createElement('link');
    linkEl.rel = 'icon';
    linkEl.type = 'image/x-icon';
    document.head.appendChild(linkEl);
    return linkEl;
  }

  // 设置新的favicon
  setFavicon(iconUrl: string): void {
    this.faviconElement.href = iconUrl;
  }

  // 获取当前favicon的地址
  getCurrentFaviconUrl(): string {
    return this.faviconElement.href;
  }
}

在组件中使用这个服务 #

和使用Title服务一样，只需要在组件中注入这个自定义服务，就能轻松修改favicon：

import { Component } from '@angular/core';
import { FaviconService } from './favicon.service';

@Component({
  selector: 'app-demo',
  template: `
    <button (click)="switchToDefaultFavicon()">默认图标</button>
    <button (click)="switchToNotificationFavicon()">通知图标</button>
  `
})
export class DemoComponent {
  constructor(private faviconService: FaviconService) {}

  switchToDefaultFavicon(): void {
    this.faviconService.setFavicon('/assets/favicon.ico');
  }

  switchToNotificationFavicon(): void {
    this.faviconService.setFavicon('/assets/notification-favicon.ico');
  }
}

补充说明 #

官方没有推出这个服务的原因，大概率是因为修改favicon的需求相对页面标题来说没那么高频，而且原生实现逻辑简单，官方认为没必要专门做一个内置服务。但自己封装的这个服务完全可以达到和Title服务一样的便捷性，适配Angular的开发习惯。

内容的提问来源于stack exchange，提问作者Christian Benseler