如何在点击事件触发时为p-breadcrumb列表新增面包屑项？

问题原因 #

• PrimeNG p-breadcrumb 组件采用 OnPush 变化检测策略，仅当输入的 items 属性引用发生变化时才会触发视图更新
• 使用数组 push 方法修改原数组时，数组的内存引用不会发生变更，组件无法检测到数据更新，因此不会渲染新增的面包屑项

正确实现方案 #

修改 addItem 方法，采用不可变更新的方式生成新数组替换原有数组，即可触发组件更新：

addItem(){
    // 展开原有数组元素+新增项，生成全新数组实例，改变引用触发变化检测
    this.items = [...this.items, {label: 'testing'}]
}

如果后续需要执行删除、插入中间项等其他修改操作，也需要遵循相同规则，始终通过返回新数组的方式修改 items，不要直接操作原数组。

内容的提问来源于stack exchange，提问作者Devmix