angularでパンクズリストを実装する方法

概要

angularでパンくずリストを実装したため、その内容について記載します。

今回はnpmライブラリである xng-breadcrumb を使用して作成しました。

使用バージョンは以下です。

• npm: 10.5.0
• node: 18.20.2
• angular: 17.3.10

パンくずリストとは

サイトの上部でよく見る「ホーム ▶︎ 買い物かご ▶︎ 商品1」のような表示です。

Webページのどこにいるかをわかりやすくするために使われています。
「買い物かご」をクリックするとそのページに戻ります。

使用手順

1. npmライブラリのインストール

以下のコマンドで xng-breadcrumb ライブラリをインストールします。

npm install xng-breadcrumbs

2. パンクズリストのComponentを作成

パンクズリストのコンポーネントを作成するため、以下のように記述します。

breadcrumbs.component.html

<xng-breadcrumb [separator]="iconTemplate" class="breadcrumbs"></xng-breadcrumb>
<ng-template #iconTemplate>
  <div class="separator"> ▶︎ </div>
</ng-template>

• <div class="separator"> ▶︎ </div>の部分がパンクズリストの各項目を繋ぐ文字列です

---

breadcrumbs.component.scss

.breadcrumbs {
  width: 400px;
  color: rgba(105, 136, 157, 1);
  position: absolute;
  top: 73px;
  left: 33px;
  text-decoration: none;
  font-size: 16px;
  text-align: left;
  display: block;
  padding: 16px 16px 16px 40px;
  background-position: left 16px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-image: url(https://img.icons8.com/?size=100&id=59809&format=png&color=576C88);
  .separator {
    font-size: 12px;
  }
}

• 基本的には好きに作って問題ないかと思います。今回はホームアイコンを設定したかったため、backgroundを設定しています

---

breadcrumbs.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BreadcrumbComponent, BreadcrumbItemDirective } from "xng-breadcrumb";
import { BreadcrumbService } from 'xng-breadcrumb';

@Component({
  selector: 'lbt-breadcrumbs',
  standalone: true,
  imports: [CommonModule, BreadcrumbComponent, BreadcrumbItemDirective],
  templateUrl: './breadcrumbs.component.html',
  styleUrls: ['./breadcrumbs.component.scss', '/src/styles.scss']
})
export class BreadcrumbsComponent {
  constructor(
    private breadcrumbService: BreadcrumbService,
  ) { }

  ngOnInit(): void {
  }
}

• 特別な動作をさせない場合は上記のようなコードで問題ありません。細かい仕様変更をしたい場合は公式ドキュメントを参照してください

3. routes.tsにて各ページのタイトルを設定する。

routes.tsにてパンクズリストに表示する各ページのタイトルを設定します。

以下のコードは一例です。
自分の作成したプロジェクトに合わせて設定してください。

app.routes.ts

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full',
    data: { breadcrumb: 'ホーム'}
  },
  {
    path: 'auth',
    data: { breadcrumb: {skip: true}},
    children: [
      {
        path: 'log-in',
        component: LogInComponent,
        data: { breadcrumb: 'ログイン'}
      },
      {
        path: 'sign-up',
        component: SignUpComponent,
        data: { breadcrumb: '会員登録'}
      },
    ]
  }
}

• 基本的にはルートが入れ子になっている場合に、パンクズリストの子階層として表示されます
• data: { breadcrumb: 'ホーム'}
  • ここでパンクズリストに表示する文字列を設定しています
• data: { breadcrumb: {skip: true}},
  • 該当のルートで文字列を表示しない場合は、skip:trueを設定します

4. 各ページでパンクズリストコンポーネントを設定する。

play.component.html

<lbt-breadcrumbs></lbt-breadcrumbs>
<-- 以下は各ページのコード -->

注意点

• パンクズリストの表示順

  • おそらくですが、routes.tsに設定されているパスの親子関係通りにしかパンクズリストは表示できなさそうです

• 細かい仕様

  • 細かい仕様については公式のnpmライブラリのページに記載されていますので、適宜ご確認ください
    https://www.npmjs.com/package/xng-breadcrumb?activeTab=readme