web-dev-qa-db-ja.com

Angularのルートに基づいてメタ記述を動的に追加します

Angular 5を使用して、小さなパンフレットタイプのWebサイトを構築しています。これまでのところ、ルートを設定しており、アクティブ化されたルートに基づいてページタイトルが動的に変更されます。このブログの指示を使用してこれを機能させました： https://toddmotto.com/dynamic-page-titles-angular-2-router-events

現在、ルートとタイトルをapp.module.tsに保存しています：

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:の下にメタ記述を追加するだけで十分であれば、メタ記述もそこに保存したいと思います。

上記のブログリンクに記載されている次のコードを使用して、タイトルデータを取得しています。

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

私の質問は、同じ方法を使用してメタ記述を動的に設定する方法はありますか？ページタイトルとメタディスクリプション機能を組み合わせる方法があれば、それが理想的です。

Angularトレーニングは非常に限られているため、これはヌービーな質問かもしれません。私はもっ​​とデザイナ/ css/htmlのような人です。

angulartypescriptangular-ui-router
38
Kellen

まず、SEOServiceまたは以下のようなものを作成します。

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メソッドでメタタグとタイトルを設定します

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固有のタグを簡単に更新できます。

38
Okan Aslankan

Title および Meta は、Angular 4で導入され、サーバー側とクライアント側の両方でこれを行うことになっているプロバイダーです。

titleタグとdescriptionメタタグを作成または更新するには、次のようにします。

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+およびRxJS 6+ソリューション

Angular 6にアップグレードする場合/これがソリューションです。

このサービスは：

  • ルート変更時にメタタイトルを更新します。
  • 必要な理由でタイトルを上書きするオプション。

SEO /メタサービスを次のように作成/変更します。

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

サービスをインポートして、コンストラクターで呼び出します。

app.component.ts

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

そして、これはまだこのようなルートをフォーマットする必要があります。

ルートfile.ts

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

これが、Angular 6でタイトル/メタを動的に更新しようとしているあなたや他の人々に役立つことを願っています。

4
Walgermo