Angularでページのtitleタグを動的に設定する

Angularでは、Route のパラメータで各ページのタイトルを設定できます。 もしAPIのレスポンスなど、動的なデータからタイトルタグを設定したい場合は、@angular/platform-browserのTitle […]

広告ここから
広告ここまで

目次

    Angularでは、Route のパラメータで各ページのタイトルを設定できます。

    import { NgModule } from '@angular/core';
    import { Routes } from '@angular/router';
    
    const routes: Routes = [
      {
        path: '',
        children: [{
            path: 'home',
            title: 'このアプリについて',
            loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule),
          },
    ...

    もしAPIのレスポンスなど、動的なデータからタイトルタグを設定したい場合は、@angular/platform-browserTitle  を使いましょう。

    import { Component, OnInit } from '@angular/core';
    import { Title } from '@angular/platform-browser';
    import { ActivatedRoute } from '@angular/router';
    import { HttpClient } from '@angular/common/http';
    
    @Component({
      selector: 'app-item-detail',
      templateUrl: './item-detail.page.html',
      styleUrls: ['./item-detail.page.scss'],
    })
    export class ItemDetailPage implements OnInit {
      constructor(
        private readonly activatedRoute: ActivatedRoute,
        private readonly title: Title,
        private readonly http: HttpClient,
      ) { }
    
      public ngOnInit() {
        const id = this.activatedRoute.snapshot.paramMap.get('id');
        this.http.get(`https://example.com/${id}`)
          .subscribe(result => {
            this.title.setTitle(this.souvenir.name);
          })

    全ページのtitleタグに同じ文字列を追加したい場合

    サイト名をタイトルにつけたい場合などでは、TitleStrategyを使います。

    import { Injectable } from '@angular/core';
    import { Title } from '@angular/platform-browser';
    import { TitleStrategy, RouterStateSnapshot } from '@angular/router';
    
    @Injectable()
    export class AppTitleStrategy extends TitleStrategy {
      constructor(private titleService: Title) {
        super()
      }
    
      override updateTitle(snapshot: RouterStateSnapshot) {
        const title = this.buildTitle(snapshot);
        this.titleService.setTitle(title ? `${title} | サイト名` : 'サイト名');
      }
    }

    これを、app-routing.module.tsprovidersにセットします。

    import { NgModule } from '@angular/core';
    import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
    import { TitleStrategy } from '@angular/router';
    import { AppTitleStrategy } from './app-title-strategy'
    
    ...
    
    @NgModule({
      imports: [
        RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
      ],
      exports: [RouterModule],
      providers: [{ provide: TitleStrategy, useClass: AppTitleStrategy }]
    })
    export class AppRoutingModule { }

    参考にした記事・URL

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark