Я хотел бы нет. элементов на значке корзины, который находится в компоненте заголовка, будут увеличиваться, когда я нажимаю кнопку «Добавить в корзину». Но то же самое работает только тогда, когда я обновляю страницу.
Я использую службу корзины для хранения глобальных данных, а затем получаю доступ к ним в компоненте заголовка. Я подписался на поведение субъекта при инициализации. Пожалуйста, взгляните на эти фрагменты кода:
Мой файл cart.service.ts:
export class CartService {
public cartItem: ICartItem[] = [];
cartItems = new BehaviorSubject<ICartItem[]>(this.cartItem);
cartItems$ = this.cartItems.asObservable();
constructor(private cookieService: CookieService) {
this.GetCartData()
}
GetCartData() {
if (this.cookieService.check('cartItems')) {
this.cartItem = JSON.parse(this.cookieService.get('cartItems'));
} else {
this.cartItem = [];
}
this.cartItems.next(this.cartItem);
}
publishCartChange() {
this.cartItem = JSON.parse(this.cookieService.get('cartItems'));
this.cartItems.next(this.cartItem);
}
AddCartItem(item: ICartItem) {
this.cartItem.push(item);
this.cookieService.set('cartItems', JSON.stringify(this.cartItem));
this.cartItems.next(this.cartItem);
}
}
Как я получаю доступ к компоненту заголовка:
this.cartService.publishCartChange();
this.cartItemSub = this.cartService.cartItems$.subscribe(res => {
console.info(res);
this.cartItems = res;
console.info(res);
this.cartQty = this.cartItems.length;
});
Вот что делает моя кнопка «Добавить в корзину»:
addtoCart() {
let cartItem: ICartItem = {'ItemId': this.product['itemId'], 'ItemName': this.product['itemName'], price: this.product['specialPrice'], 'qty': this.qty, 'amount': this.product['specialPrice']* this.qty };
this.cartService.AddCartItem(cartItem);
}
Вы добавили атрибут для внедрения и указали, что он должен быть зарегистрирован в корневом инжекторе? Это сделает его синглтоном для всего приложения, что, вероятно, вам и нужно.
Обязательно удалите его из массива providers
из любого NgModule/Component, если вы зарегистрировали его через модуль/компонент.
@Injectable({ providedIn: 'root' })
export class CartService {
...
}
Я знал об этом, но он показывал мне результат при обновлении, поэтому меня это меньше беспокоило.