根据Angular中的路线动态添加元描述 [英] Dynamically add meta description based on route in Angular

问题描述

我正在使用Angular 5建立一个小型小册子型网站.到目前为止，我已经设置了路由，并且页面标题根据激活的路由而动态更改.我按照此博客上的说明进行了这项工作: https://toddmotto. com/dynamic-page-titles-angular-2-router-events

I'm using Angular 5 to build a small brochure type website. Thus far, I have my routes set up, and the page title changes dynamically based on the activated route. I got this working using the instructions on this blog: https://toddmotto.com/dynamic-page-titles-angular-2-router-events

我目前正在这样将路线和标题存储在app.module.ts中:

I'm currently storing my routes and titles in app.module.ts as such:

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

我也想在这里存储我的元描述，如果在data:下添加它们很容易.

I'd like to store my meta descriptions there as well, if adding them under data: would be easy enough.

我使用以下代码提取标题数据，上面的博客链接中对此进行了标注:

I'm pulling in that title data with the following code, which is noted in the blog link above:

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

所以我的问题是，有没有一种方法可以使用相同的方法动态设置元描述?如果有一种组合页面标题和元描述功能的方法，那将是理想的选择.

So my question is, is there a way to dynamically set the meta description using the same method? If there is a way to combine the page title and meta description function, that would be ideal.

我对Angular的培训非常有限，所以这可能是一个nooby问题.我更像是名设计师/css/html.

I have very limited Angular training, so this might be a nooby question. I'm more of a designer/css/html kind of guy.

推荐答案

首先创建SEOService或类似以下内容的东西:

First create a SEOService or Something like below:

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

在您的组件中注入SEOService 后，在OnInit方法中设置元标记和标题

After injecting the SEOService in your component, set meta tags and title in OnInit method

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

对于使用管道运算符的RxJs 6 +

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

然后将您的路线配置为

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

恕我直言，这是处理元标记的一种清晰方法.您可以更轻松地更新Facebook和Twitter特定标签.

IMHO this is a clear way of dealing with meta tags. You can update facebook and twitter specific tags easier.

这篇关于根据Angular中的路线动态添加元描述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！