Angular 2 新しいルーターでページタイトルを変更する - 初心者から上級者まで

Angular 2 新しいルーターでページタイトルを変更する方法

Title サービスをインポートする

まず、@angular/platform-browser から Title サービスをインポートする必要があります。

import { Title } from '@angular/platform-browser';

コンポーネントで Title サービスを注入する

次に、コンポーネントのコンストラクタで Title サービスを注入します。

constructor(private titleService: Title) { }

ナビゲーションイベントをサブスクライブする

Router インスタンスから NavigationEnd イベントをサブスクライブします。 このイベントは、ルーティングが完了したときに発生します。

ngOnInit() {
  this.router.events.subscribe((event: any) => {
    if (event instanceof NavigationEnd) {
      this.setTitle();
    }
  });
}

setTitle メソッドを作成する

setTitle メソッドを作成し、現在のルートの情報に基づいてページタイトルを設定します。

private setTitle() {
  const title = this.router.url.substr(1);
  if (title) {
    this.titleService.setTitle(title + ' - My App');
  } else {
    this.titleService.setTitle('My App');
  }
}

このコードは、現在の URL に基づいてページタイトルを動的に更新します。 たとえば、/home に移動すると、ページタイトルは "Home - My App" になります。 / に移動すると、ページタイトルは "My App" になります。

• より複雑なロジックを使用して、ページタイトルを設定することができます。 たとえば、ルートデータからタイトルを取得したり、カスタム タイトル設定を使用したりすることができます。

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router, private titleService: Title) { }

  ngOnInit() {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.setTitle();
      }
    });
  }

  private setTitle() {
    const title = this.router.url.substr(1);
    if (title) {
      this.titleService.setTitle(title + ' - My App');
    } else {
      this.titleService.setTitle('My App');
    }
  }
}

app.component.html

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/contact">Contact</a>
</nav>

<router-outlet></router-outlet>

nav {
  background-color: #f0f0f0;
  padding: 10px;
}

nav a {
  display: inline-block;
  margin-right: 20px;
  text-decoration: none;
  color: #333;
}

RouterModule.forRoot() メソッドの data プロパティを使用して、ルートデータにページタイトル情報を設定することができます。

const routes: Routes = [
  { path: '/', component: HomeComponent, data: { title: 'Home' } },
  { path: '/about', component: AboutComponent, data: { title: 'About' } },
  { path: '/contact', component: ContactComponent, data: { title: 'Contact' } }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  // ...
})
export class AppModule { }

次に、コンポーネントで ActivatedRoute サービスを注入し、data プロパティからタイトルを取得することができます。

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  title: string;

  constructor(private route: ActivatedRoute) {
    this.title = this.route.data['title'];
  }
}

Resolve ガードを使用する

Resolve ガードを使用して、ルートデータにページタイトル情報を非同期的に設定することができます。

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, Resolve } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class TitleResolver implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return route.data['title'];
  }
}

const routes: Routes = [
  { path: '/', component: HomeComponent, resolve: { title: TitleResolver } },
  // ...
];

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  title: string;

  constructor(private route: ActivatedRoute) {
    this.route.data.subscribe(data => this.title = data['title']);
  }
}

カスタムサービスを使用する

カスタムサービスを作成して、ページタイトルの管理ロジックをカプセル化することができます。

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

@Injectable({
  providedIn: 'root'
})
export class PageTitleService {
  constructor(private router: Router, private titleService: Title) {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.setTitle();
      }
    });
  }

  private setTitle() {
    const title = this.router.url.substr(1);
    if (title) {
      this.titleService.setTitle(title + ' - My App');
    } else {
      this.titleService.setTitle('My App');
    }
  }
}

次に、コンポーネントで PageTitleService を注入して、setTitle() メソッドを呼び出すことができます。

import { Component } from '@angular/core';
import { PageTitleService } from './page-title.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  constructor(private pageTitleService: PageTitleService) { }

  ngOnInit() {
    this.pageTitleService.setTitle('Home');
  }
}

これらの方法はすべて、Angular 2 の新しいルーターでページタイトルを動的に更新するために使用できます。 自分に合った方法を選択してください。

• 上記の例では、単純なページタイトルを設定しています。 より複雑なロジックを実装