Angular 5 中的页眉和页脚

2024-02-22

我正在用 Angular 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>`

你应该使用 Angular 5Title & 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'});
      ......
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 5 中的页眉和页脚 的相关文章

随机推荐