Angular 2: Как динамически добавлять и обновлять метатеги с помощью компонента (например, службы заголовка)

Я очень новичок в Angular 2. Мне нужно настроить метатеги, такие как og: description и все из компонента. Я не знаю, как динамически обновлять метатеги, а также добавлять новые теги к index.html из определенного компонента.

Пожалуйста, помогите.

PS: Я прочитал о сервисе заголовка, но это только для обновления названия.

Ответ 2

Первый импорт Meta-сервиса в ваш компонент

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

Поместите его в конструктор

constructor(private Meta:Meta){}

Используйте сервис:

this.Meta.addTag({ name: 'yourmetaname', content: 'yourmetacontent' });

вы можете искать дополнительную информацию в официальных DOCS:

https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html

Ответ 3

В Angular 4 вы можете легко обновить заголовок вашей веб-страницы и информацию о метатеге.

  1. Импортируйте предопределенную мета-службу в ваш компонент.
 import { Meta, Title } from '@angular/platform-browser';
  1. Введите Сервис в Конструкторе.
constructor(private title: Title, private meta: Meta) {} 
  1. Добавьте заголовок и метатег в ngOnInit(), используя setTitle и updateTag
 ngOnInit(){    
        this.title.setTitle('Angular Overview');    
        this.meta.updateTag({ name:'author',content:'angulartpoint.com'});    
        this.meta.updateTag({name:'keyword',content:'angular overview, features'});    
        this.meta.updateTag({name:'description',content:'It contains overview of angular application'});    
    }
  1. Проверьте заголовок тега в браузере.
    введите описание изображения здесь