Список статей

Запись и чтение meta тегов в Angular

31.12.2017

Сервис Angular Meta позволяет легко получать или устанавливать разные метатеги в зависимости от текущего активного маршрута в вашем приложении. Давайте рассмотрим его использование и доступные методы.

Источник

addTag & addTags

Использование сервиса Meta так же просто, как импортировать его из @angular/platform-browser и вставлять его в компонент.

Вот пример, где мы добавляем метатеги для карты Twitter, когда загружается домашний компонент:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  constructor(private meta: Meta) {
    this.meta.addTag({ name: 'twitter:card', content: 'summary_large_image' });
    this.meta.addTag({ name: 'twitter:site', content: '@alligatorio' });
    this.meta.addTag({ name: 'twitter:title', content: 'Front-end Web Development, Chewed Up' });
    this.meta.addTag({ name: 'twitter:description', content: 'Learn frontend web development...' });
    this.meta.addTag({ name: 'twitter:image', content: 'https://alligator.io/images/front-end-cover.png' });
  }
}

С помощью нескольких метатегов, подобных приведенному выше примеру, вы можете использовать метод addTags, чтобы установить их все в один и тот же вызов:

this.meta.addTags([
  { name: 'twitter:card', content: 'summary_large_image' },
  { name: 'twitter:site', content: '@alligatorio' },
  // ...
]);

Обратите внимание, что и addTag, и addTags могут принимать второй логический аргумент, чтобы указать, должен ли тег быть создан, даже если он уже существует. Здесь, например, тег будет добавлен дважды:

constructor(private meta: Meta) {
    this.meta.addTags([
      { name: 'twitter:site', content: '@alligatorio' },
      { name: 'twitter:site', content: '@alligatorio' }
    ], true);
  }
}

getTag & getTags

Аналогично методам addTag и addTags существуют также методы getTag и getTags. Вот пример использования getTag:

constructor(private meta: Meta) {
  const viewport = this.meta.getTag('name=viewport');
  console.log(viewport.content); // width=device-width, initial-scale=1
}

getTag принимает строку с селектором атрибута и возвращает элемент HTMLMetaElement. getTags также принимает селектор атрибутов, но возвращает массив с потенциально множественными элементами HTMLMetaElements, которые соответствуют селектору.

updateTag

Учитывая новое определение метатега и селектор, метод updateTag обновит любой тег, соответствующий селектору. В следующем несколько надуманном примере мы сначала установили метатег с содержимым summary_large_image, а затем обновили его до summary:

constructor(private meta: Meta) {
  this.meta.addTag(
    { name: 'twitter:card', content: 'summary_large_image' }
  );

  this.meta.updateTag(
    { name: 'twitter:card', content: 'summary' },
    `name='twitter:card'`
  );
}

В реальном приложении вы, скорее всего, захотите обновить метатеги, которые присутствуют глобально в приложении, но это должно принимать разные значения в зависимости от активного маршрута.

removeTag & removeTagElement

Метод removeTag принимает строку для селектора атрибутов и удаляет тег. Вот как вы можете удалить метатег charset:

constructor(private meta: Meta) {
  this.meta.removeTag('charset');
}

Элемент removeTagElement аналогичен, но вместо селектора используется HTMLTagElement. Вот тот же пример, но здесь мы сначала получаем элемент метатега элемента charset:

constructor(private meta: Meta) {
  const chartsetTag = this.meta.getTag('charset');
  this.meta.removeTagElement(chartsetTag);
}

И все! Теперь вы знаете, как динамически добавлять, удалять или обновлять метатеги.