angular - Angular 5 中的页眉和页脚

标签 angular directive angular5 meta

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

以上是主页的可能。

但对于 Stores 和 Categories,它会根据页面而变化。

需要一个关于如何根据页面更改标题和元关键字的解决方案

像商店一样:

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

最佳答案

您应该使用 Angular 5 TitleMeta 服务。它在 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'});
      ......
}

关于angular - Angular 5 中的页眉和页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48723857/

相关文章:

javascript - 类型数组 :- Cannot invoke an expression whose type lacks a call signature 的 typescript 错误

angular - 无法将 Angular 从版本 6 降级到版本 5

css - 跨元素共享 css 和 ts

angular - 如何将日期 DatePipe 与 ngx-translate 一起使用

jquery-ui-sortable - 将参数从指令传递给回调

C++ 编写一个适当的类似函数的宏

angular5 - 在 ngx-bootstrap 中为 Angular 5 滑动带有动画的图像

angular - 垫扩展面板组件图标对齐问题

c# - 使用angular2将图像上传到asp.net core

javascript - 在 Controller 中使用 'this' 或 "var Vm = this"声明的变量未反射(reflect)使用指令访问时的值