Header 和 Angular 中的页脚 5

Question

我正在 angular 5

创建我的网站

我的网站中有主页、商店和类别页面

最初我决定在整个网站上将 header 和页脚保持为全局。

我的意思是创建一个 header 和页脚组件并将它们用作指令

<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>

我正在尝试使用页面的元信息，例如页面标题，meta-keywords 来自我的数据库。

首页可以。

对于商店和类别，我有点困惑如何使用页面标题，meta-keywords。

例如：

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

以上是首页的可能。

但对于商店和类别，它会根据页面而变化。

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

为商店点赞：

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

Answer 1

您应该使用 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'});
      ......
}

Answer 2

这是我发现的工作方式：

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

Header 和 Angular 中的页脚 5

Header and Footer in Angular 5

meta

directive

angular

angular5