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

Question

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

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

Answer 1

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

使用Angular Meta 服务中的 updateTag：

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

运行示例

旧答案： 我只需为此创建一个服务并执行一些 javascript（javascript 代码从此处获取）：

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);
  }
}

运行测试以在移动设备上运行。

示例的可编辑版本。