点击主页时如何点击p-breadcrumb

Question

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'}
        ];
    }
}

在文档中提供了 onItemClick，但没有解释如何使用它

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

Answer 1

在您的模板中时；

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

在你的组件中；

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);
    }
}

顺便说一句，onItemClick 是一项新功能，已在以下版本中添加到 PrimeNg 中：

我在 9.0.6 上测试了上面的代码并且它有效。如果您使用的是比上述版本更旧的版本，它将无法工作。

更新： 我检查了面包屑实施，我注意到有一个部分记录的功能 here. Apparently MenuItem has documented command 属性在单击项目时执行。由于未在 p-breadcrumb 中记录，因此不容易发现该功能。

@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 :(" }
  ];
}

这是 primeng@6.1.7 上的可点击面包屑演示：https://stackblitz.com/edit/angular-6-template-kbxbb3

点击主页时如何点击p-breadcrumb

How to get a click on p-breadcrumb when click on home

javascript

primeng

angular