webentwicklung-frage-antwort-db.com.de

Dynamisches Hinzufügen einer Meta-Beschreibung basierend auf der Route in Angular

Ich verwende Angular 5, um eine kleine Website vom Typ Broschüre zu erstellen. Bisher habe ich meine Routen eingerichtet und der Seitentitel ändert sich dynamisch basierend auf der aktivierten Route die Anweisungen in diesem Blog: https://toddmotto.com/dynamic-page-titles-angular-2-router-events

Ich speichere derzeit meine Routen und Titel in app.module.ts als solche:

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'
        }  
      }
    ])
  ],

Ich möchte meine Meta-Beschreibungen dort auch speichern, wenn das Hinzufügen unter data: Einfach genug wäre.

Ich ziehe diese Titeldaten mit dem folgenden Code ein, der im obigen Blog-Link vermerkt ist:

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

Meine Frage ist also, gibt es eine Möglichkeit, die Meta-Beschreibung mithilfe derselben Methode dynamisch festzulegen? Wenn es eine Möglichkeit gibt, den Seitentitel und die Meta-Beschreibungsfunktion zu kombinieren, wäre dies ideal.

Ich habe nur sehr begrenzte Angular ==========================================================================.

38
Kellen

Erstellen Sie zuerst einen SEOService oder so etwas:

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

@Injectable()
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 })
  }

Nach dem Einfügen des SEOService in Ihre Komponente, setzen Sie Meta-Tags und Titel in der OnInit-Methode

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._seoService.updateTitle(event['title']);
    this._seoService.updateOgUrl(event['ogUrl']);
    //Updating Description tag dynamically with title
    this._seoService.updateDescription(event['title'] + event['description'])
  }); 
}

Edit: Für RxJs 6+, die den Pipe-Operator verwenden

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

Dann konfigurieren Sie Ihre Routen wie

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

IMHO ist dies ein klarer Weg, um mit Meta-Tags umzugehen. Sie können Facebook- und Twitter-spezifische Tags einfacher aktualisieren.

38
Okan Aslankan

Title und Meta sind Anbieter, die in Angular 4 eingeführt wurden und dies am tun sollen Server- und Client-Seite.

So erstellen oder aktualisieren Sie ein title -Tag und ein description -Meta-Tag:

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);
6
Estus Flask

Angular 6+ und RxJS 6+ Lösung zur dynamischen Titeleinstellung bei Routenänderung

Wenn Sie ein Upgrade auf Angular 6 durchführen, ist dies die Lösung.

Dieser Service wird:

  • Metatitel bei Routenänderung aktualisieren.
  • Option zum Überschreiben des Titels aus beliebigen Gründen.

Erstellen/ändern Sie Ihren SEO/Meta-Service wie folgt.

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

Importieren Sie Ihren Service und rufen Sie ihn im Konstruktor auf.

app.component.ts

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

Und dazu müssen noch Routen wie diese formatiert werden.

Route file.ts

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

Ich hoffe, dies hilft Ihnen und anderen, die den Titel/das Meta dynamisch in Angular 6 aktualisieren möchten.

4
Walgermo