Angular 5中的标题和页脚



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

我正在尝试使用页面的元信息,例如页面标题,我的数据库中的元关键字。

对于主页是可能的。

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

例如:

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

主页上以上是可能的。

但对于商店和类别,它将根据页面进行更改。

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

喜欢商店:

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

您应该使用Angular 5 Title&amp;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'});
      ......
}

这是我发现的工作:

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

最新更新