Сервис 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