Верхний и нижний колонтитулы в Ангуляр 5

Я создаю свой сайт в угловых 5

У меня есть домашняя страница, магазины и категории в качестве страниц на моем сайте

Первоначально я решил сохранить верхний и нижний колонтитулы как глобальные для всего сайта.

Я имею в виду создание компонентов верхнего и нижнего колонтитула и использование их в качестве директив

<app-header></app-header>
<app-homepage></app-homepage>
<app-header></app-header>

<app-header></app-header>
<app-stores></app-stores>
<app-header></app-header>

<app-header></app-header>
<app-categories></app-categories>
<app-header></app-header>

Я пытаюсь использовать метаинформацию страницы, такую ​​как заголовок страницы, мета-ключевые слова из моей базы данных.

Для домашней страницы это возможно.

Для магазинов и категорий я немного запутался, как я могу использовать заголовок страницы, мета-ключевые слова.

Например:

`<html>
<title>{{ homepage.title }}</title>
<meta keywords = {{ homepage.meta_keywords }}>
</html>`

Выше возможно для домашней страницы.

Но для магазинов и категорий он будет меняться в зависимости от страницы.

Нужно решение о том, как я могу изменить заголовок и мета-ключевые слова в соответствии со страницей

Как для магазинов:

`<html>
<title>{{ storepage.title }}</title>
<meta keywords = {{ storepage.meta_keywords }}>
</html>`
Источник

2 ответа

Вы должны использовать Angular 5 Title & Meta Сервисы. В Angular 5 все готово, поэтому вы можете:

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

ngOnInit() {
     this.title.setTitle(pageTitle);
     this.meta.updateTag({property: 'og:description', content: pageDescription});
     this.meta.updateTag({property: 'twitter:card', content: 'summary'});
      ......
}
Источник

Вот что я нашел работающим:

https://github.com/angular/angular-cli/wiki/stories-universal-rendering

Источник
Другие вопросы по тегам