Header and Footer in Angular 5

问题

I am creating my website in angular 5

I have homepage, stores and categories as pages in my site

Initially I decided to keep header and footer as global across the website.

I mean to create a header and footer components and use them as directives

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

I am trying to use the meta information of the page, like page title, meta-keywords from my database.

For the homepage it is possible.

For stores and categories I am little confused how can I use the page title, meta-keywords.

For example:

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

The above is possible for homepage.

But for Stores and Categories it will change according to page.

Need a solution on how I can change the title and meta keywords according to page

Like for stores :

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

回答1:

You should use Angular 5 Title & Meta services. It's out of the box in Angular 5 so you can:

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'});
      ......
}

回答2:

This is what I found working :

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

来源：https://stackoverflow.com/questions/48723857/header-and-footer-in-angular-5

标签

angular

directive

angular5