Breadcrumb Nedir / Nasıl Kullanılır?

Sayfalar arasındaki hiyerarşiyi gösteren sayfa işaretleri yoludur. Örneğin Anasayfa / Ürün Listesi

Modüle Dosyasından Kullanımı

İlgili komponentin Modüle dosyası içerine routes tanımlaması içerisinde kullanılabilir. Data bloğunun içerisinde yer alan breadcrumb propertysi kullanılır

const routes: Routes = [
  {
    path: "",
    component: ,
    data: {
      breadcrumb: "Sayfanın Adı",
    },
  },
];

Yukarıdaki kod bloğu içerisine Sayfanın adı yazılmalıdır.

App-breadcrumb İle Kullanımı (Custom Oluşturma)

Öncelikle İlgili Komponentin modül dosyasına aşağıdaki kodlar eklenmelidir

import { CoreBreadcrumbSharedModule } from '@alpata/octapull.core';

imports: [CoreBreadcrumbSharedModule];

Daha sonra yine ilgili komponentin Html sayfasına aşağıdaki kod bloğu eklenmelidir. [id]="''" tek tırnak içerisine istenilen id değeri custom olarak verilebilir

<app-breadcrumb [id]="''" [customData]="breadCrumbCustomData"></app-breadcrumb>

Html sayfasına ilgili kod bloğu eklendikten sonra yine aynı komponentin component.ts dosyası içesinde ki ngOnInit() fonsiyonu içerisine aşağıdaki kod bloğu eklenmelidir. Eklenen breadCrumbCustomData dizisinde yer alan hiyerarşide breadcrumbs otmatik oluşturulacaktır.

this.breadCrumbCustomData = [
  {
    label: '',
    url: '/',
  },
  {
    label: '',
    url: '',
  },
  {
    label: '',
    url: '',
  },
];

label alanlarına sayfaların isimleri url alanlarına ise yine o sayfaların url'leri yazılmalıdır. En sondaki kırımımda link gösterimi yapılmamaktadır. Sadece label gösterilmektedir.

Önceden eklenmiş Breadcrumb yerine elle eklenen Breadcrumb'ı göstermek için ilgili componentin component.ts dosyası açılmalıdır constructor'a aşağıdaki kod bloğu eklenmelidir.

    constructor(
       @Inject(DOCUMENT) private document: Document
    ) {
        setTimeout(() => {
            // Varsayılan breadcrumb gizlenir ve istenilen datalar iel yenisi eklenir
            document
                .getElementById("core-base-breadcrumb")
                .classList.add("d-none");
            // Varsayılan breadcrumb gizlenir ve istenilen datalar iel yenisi eklenir

        }, 1);
    }

Sayfa kapandığında çalışan aşağıdaki kod bloğu yine ilgili componentin component.ts dosyasına eklenmelidir.

  ngOnDestroy(): void {

        // base breadcrumb görünür hale getirildi.
        document
            .getElementById("core-base-breadcrumb")
            .classList.remove("d-none");
        // base breadcrumb görünür hale getirildi.
    }