Мета-тег HTML надає метадані про документ HTML. Метадані не відображаються на сторінці, але вони доступні для машин. Мета елементи, як правило, використовуються для визначення опису сторінки, ключових слів, автора, останньої модифікації та інших метаданих. Метадані можуть використовуватися браузерами (як відображати вміст або перезавантажувати сторінку), пошуковими системами (ключовими словами) або іншими веб-службами. Мета-теги відіграють важливу роль у SEO. В Кутовий 4 , є служба під назвою "Мета", яка може використовуватися для отримання та додавання мета-тегів. Ця служба може допомогти вам встановити відповідні мета-теги на основі активних маршрутів, що, в свою чергу, впливає на SEO вашого сайту. Ця публікація розповідає про те, як використовувати цю службу та отримувати / встановлювати мета-теги HTML за допомогою Angular 4.
Angular 4 Meta служба досить проста у використанні, і вона має наступні методи і імена є очевидними. На прикладі ми побачимо всі методи в дії.
- addTag
- addTags
- getTag
- getTags
- updateTag
- removeTag
- removeTagElement
Потрібно імпортувати цю послугу з @ angular / platform-browser і вводити її у ваш компонент або послугу. Люблю:
імпортувати {Meta} з '@ angular / platform-browser';
Назва методу пояснює його призначення. Це використовується для додавання мета-тегів. Люблю:
Метод addTag додає мета-теги по черзі, але за допомогою addTags ви можете мати декілька мета-тегів в одному наборі. Люблю:
Обидва методу addTag і addTags також приймають другий параметр (forceCreation), який є bool. Значення (true / false) вказує, чи слід створити тег, навіть якщо він вже існує. Люблю:
і нижче сформований HTML. 
Тут мета-тег опису додано двічі, оскільки для створення сили встановлено значення true.
Метод getTag повертає значення мета-тега. Цей метод приймає рядок селектора атрибутів і повертає HTMLMetaElement. Ось приклад використання методу getTag.
Подібно до getTag, getTags також бере рядок селектора атрибутів і повертає масив HTMLMetaElement. Люблю:
Цей метод оновлює вміст будь-якого існуючого тегу. Люблю:
Тут оновлюється вміст мета-тега опису. У цьому випадку він встановлюється на “Angular 4 meta service”.
Метод removeTag приймає селектор атрибутів і видаляє тег. У реальному додатку навряд чи виникнуть ситуації, коли ви хочете зробити це. Однак, якщо потрібно, цей метод можна використовувати для видалення мета-тегів. Люблю:
Подібно до методу removeTag, removeTagElement також видаляє мета-тег. Але він приймає HTMLTagElement безпосередньо замість селектора рядків. Люблю:
Тут ми спочатку отримуємо мета-тег автора і передаємо його в removeTagElement, щоб видалити його.
Це воно. Ви можете перевірити демо на plnkr .
Висновок
Кутова 4 мета-служба дозволяє додавати, оновлювати, отримувати і видаляти мета-теги. Це допомагає у створенні динамічних мета-тегів на основі активних маршрутів програми Angular для кращого SEO. Цей пост показує, як використовувати Angular 4 мета-сервіс і весь його метод з прикладами.