Angular 5 中的页眉和页脚答案

【问题标题】：Header and Footer in Angular 5Angular 5 中的页眉和页脚
【发布时间】：2018-07-21 06:54:39
【问题描述】：

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

【问题讨论】：

使用页面组件中的EvenetEmitter ...或使用共享服务发出主题/行为主题...
@Faisal，您能否分享一个演示或 plunkr 以便更好地理解。它不是事件，只是想让页面标题动态基于整个网站的页面保持标题全局。
在 Angular 5 中，您拥有类似 Meta 和 Title 服务。您可以使用它们在页面上设置元和标题。为什么要寻找棘手的东西？
看看这里是如何使用共享服务完成的：stackoverflow.com/a/46049546/1791913

标签： angular directive angular5 meta

【解决方案1】：

这就是我发现的工作：

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

【讨论】：

【解决方案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'});
      ......
}

【讨论】：

我尝试实现您的解决方案，我能够在浏览器上看到标题更改，即使我尝试检查页面可见。但是当我尝试查看源时，标题为空
当然。 Angular 5 是前端技术，所以它需要浏览器来渲染所有东西。 Angular 还可以选择服务器端渲染，但你应该实现它。寻找 Angular 通用。这适用于服务器端的 NodeJ。如果您使用 Title 和 Meta 服务，它可以与 Universal 一起使用。
如果您从 Angular 5 开始，并且您是第一次尝试使用 Universal Look，请联系：coursetro.com/posts/code/68/… 如果您对此有任何疑问 - 请随时提问