// класс, описывающий состояние
class WishlistState {
items: Item[];
ids: {[id:string]:boolean};
}
// reducer
export function wishlist(state:WishlistState = null, action){
switch(action.type){
case ADD_PRODUCT:
return {
items: [...(state&&state.items || []), action.payload],
ids: {...state.ids, ...{action.payload.id:!0}}
};
case FETCH_WISHLIST:
return {
items: action.payload,
ids: actions.payload.reduce((acc,v)=>{acc[v.id]=!0; return acc;}, {})
};
default: return state;
}
}
// сервис, через который производится вывод данных в компоненте и проверка на содержание элемента в корзине по id'шнику
class WishlistService {
state: Observable<WishlistState>;
items: Observable<Item[]>;
constructor(store, api){
this.state = store.select(s=>s.wishlist).filter(i=>!!i);
this.items = this.state.map(i=>i.items);
}
fetch(){
this.api.getWishlist().subscribe(data=>{
this.store.dispatch({
type: FETCH_WISHLIST,
payload: data
})
})
}
contains(id):Observable<boolean>{
return this.state.map(i=>!!i.ids[id]);
}
add(item:Item){
this.store.dispatch({
type: ADD_PRODUCT,
payload: item
})
}
}
<div *ngIf="[itemCount] > 0; then someItems else noItems"></div>
ngOnInit() {
this.route.params.pluck('id').subscribe(id => {
this._PersonService.getPerson(+id).subscribe(person => this.person = person);
});
}ngOnInit(): void {
this.route.params.forEach((params: Params) => {
let id = +params['id'];
this._PersonService.getPerson(id).subscribe(person => this.person = person);
})
}
.flex-container {
height: 300px;
flex-flow: column wrap;
align-content: flex-start;
}
mysite.com/angular-slider/
mysite.com/notificator/
mysite.com/my-mega-template/