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

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

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

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

Ответ 1

В Angular4-beta.0 был добавлен Meta сервис, позволяющий добавлять/удалять метатеги.

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

constructor(private meta:Meta) {
  meta.addTag(...)
}

Для более подробной информации смотрите

Ответ 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 вы можете легко обновить заголовок вашей веб-страницы и информацию о метатеге.

Импортируйте предопределенную мета-службу в ваш компонент.

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

Введите Сервис в Конструкторе.

constructor(private title: Title, private meta: Meta) {}

Добавьте заголовок и метатег в 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'});    
    }

Проверьте заголовок тега в браузере.
введите описание изображения здесь