Angular 6 - условно изменить атрибуты элемента в заголовке HTML

Question

Я недавно узнал, что вы можете изменить заголовок Chromes на Android, поместив это в заголовок HTML.

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

Это работает отлично.Но я хочу, чтобы цвет content был динамическим в зависимости от текущей темы.

Как бы вы сделали цвет этого тега meta динамическим, если бы у вас был текущий цвет темы в качестве переменной, напримерAppComponent?

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

Answer 2

Вы можете попробовать это.В зависимости от вашей страницы, это может работать.:)

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

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

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