export class BreadcrumbDemo implements OnInit {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label:'Categories'},
            {label:'Sports'},
            {label:'Football'},
            {label:'Countries'},
            {label:'Spain'},
            {label:'F.C. Barcelona'},
            {label:'Squad'},
            {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
        ];
    }
}

Dalam dokumentasi onItemClick disediakan tetapi tidak dijelaskan cara menggunakannya

<p-breadcrumb [model]="items"></p-breadcrumb>

1
Ohan001 15 Mei 2020, 10:44

1 menjawab

Jawaban Terbaik

Ketika di template Anda;

<p-breadcrumb [model]="items" (onItemClick)="itemClicked($event)"></p-breadcrumb>

Di komponen Anda;

export class BreadcrumbDemo implements OnInit {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {label:'Categories'},
            {label:'Sports'},
            {label:'Football'},
            {label:'Countries'},
            {label:'Spain'},
            {label:'F.C. Barcelona'},
            {label:'Squad'},
            {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
        ];
    }

    itemClicked(event) {
       console.log(event.item);
    }
}

BTW, onItemClick adalah fitur baru dan telah ditambahkan ke PrimeNg pada rilis berikut:

Saya menguji kode di atas pada 9.0.6 dan berhasil. Jika Anda menggunakan versi yang lebih lama dari rilis di atas, itu tidak akan berfungsi.

PERBARUI: Saya memeriksa implementasi remah roti dan saya perhatikan bahwa ada fitur yang didokumentasikan sebagian di sini. Rupanya MenuItem memiliki < a href="https://www.primefaces.org/primeng/v6.1.6/#/menumodel" rel="nofollow noreferrer">mendokumentasikan command properti yang dijalankan saat item diklik. Karena tidak didokumentasikan dalam p-breadcrumb, tidak mudah untuk menemukan fitur tersebut.

@Component({
  selector: "app-root",
  template: `
    <p-breadcrumb [model]="items"></p-breadcrumb>
  `
})
export class AppComponent {
  private items: MenuItem[] = [
    {
      label: "I am a clickable breadcrumb :)",
      command: e => {
        console.log(`"${e.item.label}" clicked!`);
      }
    },
    { label: "I am NOT a clickable breadcrumb :(" }
  ];
}

Berikut adalah demo remah roti yang dapat diklik di primeng@6.1.7: https://stackblitz.com /edit/angular-6-template-kbxbb3

3
ysf 26 Mei 2020, 10:11