Управление данными Angular с помощью Meta

Development, Java | Amber | Комментировать запись

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

Примечание: Сервис Meta доступен для версий Angular 4 и выше.

В этом мануале мы рассмотрим доступные способы его использования.

Требования

• Базовое знакомство с HTML-элементами meta.
• Базовые навыки работы с сервисами Angular.

Это руководство было проверено на версиях Node v16.2.0, npm v7.15.1 и angular v12.0.3.

Методы addTag и addTags

Для начала сервис Meta необходимо импортировать из @angular/platform-browser и внедрить в компонент или другой сервис.

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

Если вам нужно использовать несколько тегов meta и вы хотите установить их все в одном вызове, вы можете применить метод addTags.

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

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

Этот код выдаст такой результат:

<meta name="twitter:card" content="summary_large_image">
<meta 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);
  }
}

Этот код выдаст на странице следующий результат:

<meta name="twitter:site" content="@alligatorio">
<meta name="twitter:site" content="@alligatorio">

addTag и addTags позволяют добавлять новые метатеги.

Методы getTag и getTags

Также существуют методы getTag и getTags, которые работают подобно addTag и addTags.

Рассмотрим приложение со следующим тегом:

<meta name="viewport" content="width=device-width, initial-scale=1">

Вот пример использования getTag:

constructor(private meta: Meta) {
  const viewport = this.meta.getTag('name=viewport');
  if (viewport) console.log(viewport.content);
}

Контент будет выведен на консоль.

width=device-width, initial-scale=1

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

Метод updateTag

Метод updateTag обновит любой соответствующий селектору тег, принимая новое определение тега meta и сам селектор.

В следующем (пусть и совсем условном) примере мы сначала устанавливаем метатег со значением summary_large_image для content, а затем обновляем его до 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 принимает строку селектора атрибута и удаляет тег.

Давайте рассмотрим приложение со следующим метатегом:

<meta charset="utf-8">

Вряд ли вам когда-либо придется это делать, но вот как можно удалить метатег charset:

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

RemoveTagElement работает аналогичным образом, но напрямую принимает HTMLTagElement, а не строковый селектор.

Вот тот же пример, только в этом случае мы сначала получаем элемент метатега charset:

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

Оба метода удаляют элемент meta.

Заключение

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

Читайте также: Создание карт в Angular и Leaflet