Angularでヘッダーを追加する方法

2024-02-15 14:51 Angular ヘッダー コード例
  1. ルーティングでヘッダーを追加する方法: Angularのルーティング機能を使用して、各ページにヘッダーを追加することができます。以下は、app.component.html ファイル内でヘッダーコンポーネントを表示する例です。
<app-header></app-header>
<router-outlet></router-outlet>
  1. コンポーネントでヘッダーを追加する方法: 各コンポーネントのテンプレートにヘッダーを追加することもできます。以下は、home.component.html ファイル内でヘッダーを表示する例です。
<header>
  <h1>ホームページ</h1>
</header>
  1. サービスを使用してヘッダーを追加する方法: Angularのサービスを使用して、共通のヘッダー情報を取得し、表示することもできます。以下は、header.service.ts ファイル内の例です。
import { Injectable } from '@angular/core';
@Injectable()
export class HeaderService {
  getHeader(): string {
    return 'ヘッダー情報';
  }
}

コンポーネントでサービスを使用してヘッダー情報を表示するには、以下のようにします。

import { Component } from '@angular/core';
import { HeaderService } from './header.service';
@Component({
  selector: 'app-home',
  template: `
    <header>
      <h1>{{ header }}</h1>
    </header>
  `,
})
export class HomeComponent {
  header: string;
  constructor(private headerService: HeaderService) {}
  ngOnInit() {
    this.header = this.headerService.getHeader();
  }
}

これらはいくつかの一般的な方法ですが、実際の使用方法はプロジェクトの要件によって異なります。必要に応じてこれらの例をカスタマイズし、自分のプロジェクトに適用してください。また、Angularの公式ドキュメントやコミュニティのリソースも参考にすることをおすすめします。