如何在 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.