Локальное хранилище не определено Angular
Я создаю этот проект и застрял с localStorage. Я пытаюсь сохранить состояние счетчика при нажатии кнопки добавления. Чтобы, когда я обновляю страницу, номер все еще был там.
--- cart.service.ts---
key= "count";
private Count = new BehaviorSubject<number>(this.getlocal());
Count$ = this.Count.asObservable();
incrementCount(){
const newCont = this.Count.value+1;
this.Count.next(newCont);
this.setlocal(newCont);
}
getlocal(): number {
const storedValue = localStorage.getItem(this.key);
return storedValue !== null ? parseInt(storedValue, 10) : 0;
}
setlocal(count: number) {
localStorage.setItem(this.key, count.toString());
}
Затем у меня есть компонент приложения с функцией приращения. И навигационный компонент, который получает счетчик через html.
Ответы 2
При использовании SSR и вы хотите использовать API браузера, вам необходимо обернуть этот код в afterRender или afterNextRender, иначе этот код может быть выполнен на стороне сервера (Node.JS), где localStorage не существует. Также вы не можете напрямую вернуть значение из локального хранилища в функцию, вам нужно будет настроить логику для загрузки значения из хранилища.
private Count = new BehaviorSubject<number>(0);
constructor(private readonly environmentInjector: EnvironmentInjector) {
afterNextRender(() => {
const storedValue = localStorage.getItem(this.key);
const count = storedValue !== null ? parseInt(storedValue, 10) : 0;
this.Count.next(count);
});
}
setlocal(count: number) {
runInInjectionContext(this.environmentInjector, () =>
afterNextRender(() => localStorage.setItem(this.key, count.toString()))
);
}
@NOne снова изменился на BehaviorSubject, теперь должно работать
Ошибка: NG0203: afterNextRender() можно использовать только в контексте внедрения, таком как конструктор, фабричная функция, инициализатор поля или функция, используемая с runInInjectionContext.
@NOne обновил мой ответ
Большое спасибо!
Пожалуйста, замените приведенный ниже код в файле cars.service.ts.
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CartService {
private readonly key = 'count';
// Initialize the count to 0 for each new session
private Count = new BehaviorSubject<number>(0);
Count$ = this.Count.asObservable();
constructor() {
// Reset count in localStorage to 0 on service initialization
this.setLocal(0);
}
incrementCount() {
const newCount = this.Count.value + 1;
this.Count.next(newCount);
this.setLocal(newCount);
}
private setLocal(count: number) {
if (typeof localStorage !== 'undefined') {
localStorage.setItem(this.key, count.toString());
}
}
}
Это просто заглушит ошибку, но при использовании SSR значение не сохраняется. Также вы только что удалили логику загрузки значения из локального хранилища. Это не то, о чем просили.
Значение свойства не существует для типа ReplaySubject<number>.