angular - 如何在像angular这样的应用程序中更新主题颜色

Question

我们如何使用 Angular 4 应用程序在 head 标签内动态更新主题颜色。

<meta name="theme-color" content="#db5945">

Answer 1

编辑:Debmallya Bhattacharya 建议的更好的解决方案:

使用 updateTag from the Angular Meta service :

this.meta.updateTag({ content: color }, 'name=theme-color');

Running example

旧答案:我会简单地为此创建一个服务并执行一些 javascript ( javascript code got from here ):

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

@Injectable({
  providedIn: 'root'
})
export class MetaColorService {
  changeThemeColor(color: string) {
    const metaThemeColor = document
    .querySelector("meta[name=theme-color]");
    metaThemeColor.setAttribute("content", color);
  }
}

Running test to run on mobile device.

Editable version of the example.