Angular 6 - 有条件地更改 HTML 标头中元素的属性答案

【问题标题】：Angular 6 - Conditionally change Attributes of Element in HTML HeaderAngular 6 - 有条件地更改 HTML 标头中元素的属性
【发布时间】：2019-02-23 19:28:44
【问题描述】：

我最近发现您可以通过将其放在 HTML 标头中来更改 Android 上的 Chrome 标头。

<meta name="theme-color" content="#1ee078">

这非常有效。但我希望content 颜色基于当前主题是动态的。

如果您将当前主题颜色作为变量在例如AppComponent?

【问题讨论】：

标签： android html angular google-chrome angular6

【解决方案1】：

在 Angular 中有一个内置的 API 可以编辑 meta 标签。 @angular/platform-browser/meta

您可以使用updateTag 函数。

你应该能够做类似的事情；

import { Meta } from '@angular/platform-browser';

constructor(
  private meta: Meta
) { }

ngOnInit() {
  this.meta.updateTag({ 
    name: 'theme-color', 
    content: '#1ee078' 
  });
}

【讨论】：

我对 API 不熟悉。但这似乎很有趣。

【解决方案2】：

你可以试试这个。根据您的页面，它可能会起作用。 :)

var meta=document.createElement('meta');
meta.name='theme-color';

meta.setAttribute('content', '#1ee078');

document.getElementsByTagName('head')[0].appendChild(meta);

【讨论】：