typescript - Lägg dynamiskt till meta-beskrivning baserat på rutt i Angular

Jag använder Angular 5 för att bygga en liten broschyrtyp av webbplats. Hittills har jag ställt in mina rutter, och sidans titel ändras dynamiskt baserat på den aktiverade rutten. Jag fick detta att fungera med hjälp av instruktionerna på den här bloggen: https://toddmotto.com/dynamic-page-titles-angular-2-router-events

Jag lagrar för närvarande mina rutter och titlar i app.module.ts på följande sätt:

imports: [
    BrowserModule,
    RouterModule.forRoot([
      { 
        path: '', 
        component: HomeComponent,
        data: {
          title: 'Home'
        }
      },
      { 
        path: 'about', 
        component: AboutComponent,
        data: {
          title: 'About'
        } 
      },
      { 
        path: 'products-and-services', 
        component: ProductsServicesComponent,
        data: {
          title: 'Products & Services'
        }  
      },
      { 
        path: 'world-class-laundry', 
        component: LaundryComponent,
        data: {
          title: 'World Class Laundry'
        }  
      },
      { 
        path: 'contact', 
        component: ContactComponent,
        data: {
          title: 'Contact'
        }  
      },
      { 
        path: '**', 
        component: NotFoundComponent,
        data: {
          title: 'Page Not Found'
        }  
      }
    ])
  ],

Jag skulle vilja lagra mina metabeskrivningar där också, om det skulle vara tillräckligt enkelt att lägga till dem under data:.

Jag hämtar den titeldata med följande kod, som nämns i blogg länken ovan:

ngOnInit() {
    this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map((route) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => {
        this.titleService.setTitle(event['title']);
      });
  }

Så min fråga är, finns det ett sätt att dynamiskt ställa in meta-beskrivningen med samma metod? Om det finns ett sätt att kombinera sidans titel och meta-beskrivningsfunktionen skulle det vara idealiskt.

Jag har väldigt begränsad Angular-träning, så det här kan vara en nybörjarfråga. Jag är mer en designer/css/html-typ.

Svar #1

Skapa först en SEOService eller något liknande nedan:

import {Injectable} from '@angular/core'; 
import { Meta, Title } from '@angular/platform-browser';

@Injectable({
  provideIn: 'root' // Add this to ensure your SEO service will be app-wide available
})
export class SEOService {
  constructor(private title: Title, private meta: Meta) { }


  updateTitle(title: string) {
    this.title.setTitle(title);
  }

  updateOgUrl(url: string) {
    this.meta.updateTag({ name: 'og:url', content: url })
  }

  updateDescription(desc: string) {
    this.meta.updateTag({ name: 'description', content: desc })
  }
}

Efter att ha injicerat SEOService i din komponent (helst app.component.ts), ställ in meta-taggar och titel i OnInit-metoden

ngOnInit() {
    this.router.events.pipe(
       filter((event) => event instanceof NavigationEnd),
       map(() => this.activatedRoute),
       map((route) => {
         while (route.firstChild) route = route.firstChild;
         return route;
       }),
       filter((route) => route.outlet === 'primary'),
       mergeMap((route) => route.data)
      )
      .subscribe((event) => {
        this._seoService.updateTitle(event['title']);
        this._seoService.updateOgUrl(event['ogUrl']);
        //Updating Description tag dynamically with title
        this._seoService.updateDescription(event['title'] + event['description'])
      }); 
    }

Konfigurera sedan dina rutter som

      { 
        path: 'about', 
        component: AboutComponent,
        data: {
          title: 'About',
          description:'Description Meta Tag Content',
          ogUrl: 'your og url'
        } 
      },

Enligt min åsikt är detta ett tydligt sätt att hantera metataggar. Du kan uppdatera Facebook- och Twitter-specifika taggar enklare.

Svar #2

Angular 6+ och RxJS 6+ lösning för att dynamiskt sätta titel vid ruttbyte

Om/när du uppgraderar till Angular 6 är detta lösningen där.

Denna tjänst kommer att:

• Uppdatera metatiteln vid ruttbyte.
• Alternativ att åsidosätta titel av vilken anledning du vill.

Skapa/ändra din SEO/meta-tjänst till följande.

import { Injectable } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class MetaService {
    constructor(
        private titleService: Title,
        private meta: Meta,
        private router: Router,
        private activatedRoute: ActivatedRoute
    ) { }

    updateMetaInfo(content, author, category) {
        this.meta.updateTag({ name: 'description', content: content });
        this.meta.updateTag({ name: 'author', content: author });
        this.meta.updateTag({ name: 'keywords', content: category });
    }

    updateTitle(title?: string) {
        if (!title) {
            this.router.events
                .pipe(
                    filter((event) => event instanceof NavigationEnd),
                    map(() => this.activatedRoute),
                    map((route) => {
                        while (route.firstChild) { route = route.firstChild; }
                        return route;
                    }),
                    filter((route) => route.outlet === 'primary'),
                    mergeMap((route) => route.data)).subscribe((event) => {
                        this.titleService.setTitle(event['title'] + ' | Site name');
                    });
        } else {
            this.titleService.setTitle(title + ' | Site name');
        }
    }
}

Importera din tjänst och kalla på den i konstruktorn.

app.component.ts

constructor(private meta: MetaService) {
    this.meta.updateTitle();
}

Och detta kräver fortfarande att formatera rutter på det här sättet.

Rutt file.ts

{ 
    path: 'about', 
    component: AboutComponent,
    data: {
      title: 'About',
      description:'Description Meta Tag Content'
    } 
  },

Hoppas detta kommer att hjälpa dig och andra som vill uppdatera titel/meta dynamiskt i Angular 6.

Svar #3

Title och Meta är leverantörer som introducerades i Angular 4 och var avsedda att göra detta på både server- och klientsidan.

För att skapa eller uppdatera title-taggen och description-metataggen, är det:

import { Meta, Title } from '@angular/platform-browser';

...

constructor(public meta: Meta, public title: Title, ...) { ... }

...

this.meta.updateTag({ name: 'description', content: description }); 
this.title.setTitle(title);