我的应用程序中有一个简单的组件MenuPageComponent:
...
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MenuPageComponent implements OnInit, OnDestroy {
private menuService = inject(MenuService);
menu: Menu[] = [];
categories = [
{id: 1,name: "Food"},
{id: 2,name: "Bar"}
]
// From API
constructor() {
this.menuService.fetch().pipe(
takeUntilDestroyed()
).subscribe(
response => this.menu = response
)
}
// Filter - split data by category = bar & food
getByCategory(categoryId: number) : Menu[] {
return this.menu.filter((result) => {
return result.category === categoryId;
})
}
使用html模板(mat-tab键):
<mat-tab-group color="accent">
@for (category of categories; track category.id) {
<mat-tab>
<ng-template mat-tab-label>{{ category.name }}</ng-template>
@for (menuItem of getByCategory(category.id); track menuItem.id) {
<ng-container>
<div>
<div class="item">
<div class="title">{{ menuItem.name }}</div>
<div class="space"></div>
<div class="price">{{ menuItem.price }}₽</div>
</div>
<p class="description">{{ menuItem.description }}</p>
</div>
</ng-container>
}
</mat-tab>
}
</mat-tab-group>
当我第一次访问这个页面时，一切都很正常.当我切换到"wine 吧"选项卡时，那里的一切都很好.但当我返回到食物标签时，数据消失了.
当我移除changeDetection: ChangeDetectionStrategy.OnPush个时，它工作得很好.
我可以在这个组件上使用"OnPush"吗？(或者这是完全不必要的？)