在容器中,我有这个。在ngOnit中,我得到所有披萨,然后单击onCreate()函数。比萨已同步添加,浏览器正在重新加载
ngOnInit(): void {
this.pizza$ = this.store.select<any>(fromStore.getAllPizzas);
this.store.dispatch(new fromStore.LoadPizzas());
}
onCreate(event: Pizza) {
this.store.dispatch(new fromStore.CreatePizza(event));
}
这是动作文件:存在与模型相关的不同动作
import { Action } from '@ngrx/store';
import { Pizza } from '../../../shared/models/pizza.model';
export const LOAD_PIZZAS = 'LOAD_PIZZAS';
export const LOAD_PIZZAS_FAIL = 'LOAD_PIZZAS_FAIL';
export const LOAD_PIZZAS_SUCCESS = 'LOAD_PIZZAS_SUCCESS';
export class LoadPizzas implements Action {
readonly type = LOAD_PIZZAS;
constructor() { }
}
export class LoadPizzasFail implements Action {
readonly type = LOAD_PIZZAS_FAIL;
constructor(public payload: any) { }
}
export class LoadPizzasSuccess implements Action {
readonly type = LOAD_PIZZAS_SUCCESS;
constructor(public payload: Pizza[]) { }
}
// create pizza
export const CREATE_PIZZA = '[Products] Create Pizza';
export const CREATE_PIZZA_FAIL = '[Products] Create Pizza Fail';
export const CREATE_PIZZA_SUCCESS = '[Products] Create Pizza Success';
export class CreatePizza implements Action {
readonly type = CREATE_PIZZA;
constructor(public payload: Pizza) {}
}
export class CreatePizzaFail implements Action {
readonly type = CREATE_PIZZA_FAIL;
constructor(public payload: any) {}
}
export class CreatePizzaSuccess implements Action {
readonly type = CREATE_PIZZA_SUCCESS;
constructor(public payload: Pizza) {}
}
export type PizzasAction =
LoadPizzas |
LoadPizzasFail |
LoadPizzasSuccess |
CreatePizza |
CreatePizzaFail |
CreatePizzaSuccess;
这是容器HTML
<app-pizza-create (createPizzaEvent)="onCreate($event)">
</app-pizza-create>
<app-pizza-list [pizza$]="pizza$">
</app-pizza-list>
答案 0 :(得分:1)
之所以会发生这种情况,是因为修改了其中一个文件后,您的Angular CLI实时重新加载了页面。由于您要将记录追加到db.json
,因此也会导致重新加载。
要解决此问题,请将文件移至src
目录之外,或完全禁用实时重新加载(我不知道您是否可以忽略文件)。