Angular 5 中的页眉和页脚
Posted
技术标签:
【中文标题】Angular 5 中的页眉和页脚【英文标题】：Header and Footer in Angular 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 服务。您可以使用它们在页面上设置元和标题。为什么要寻找棘手的东西？
看看这里是如何使用共享服务完成的：***.com/a/46049546/1791913
【参考方案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 中的页眉和页脚的主要内容，如果未能解决你的问题，请参考以下文章