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-browser
のTitle
を使いましょう。
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.ts
のproviders
にセットします。
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 { }