Angular 18 Проблема с логикой компонентов для сохранения и привлечения LocalStorage ⇐ Javascript

[Anonymous]

Я создаю компонент с использованием Angular 18, который показывает список клиентов, и одной из характеристик этого компонента является то, что он должен сохранять в локальном хранилище статус примененных фильтров и номер страницы, на которой он находится. чтобы, когда пользователь переходит на другую страницу и возвращается к списку клиентов, он отображал информацию в соответствии с последним статусом, сохраненным в локальном хранилище. Моя проблема в том, что когда я выбираю страницу в нумерации страниц и перехожу на другую страницу при возвращении в список, нумерация страниц возвращается к 1 и я не могу точно найти причину. Я следил за этим, и, видимо, при инициализации компонента он загружает данные из локального хранилища, но затем они возвращаются к 1. Я создал службу для переноса данных и сохранения их в локальном хранилище, я хотел бы найти причину такого поведения. . Я подумывал разместить логику загрузки информации в конструкторе, но думаю, что лучше оставить ее в конце NgOnInit.
это компонент mi:

Код: Выделить всё

  selector: 'app-cliente-list',
standalone: true,
imports: [NgbPaginationModule, ClienteFiltersComponent, NgForOf, NgIf, FaIconComponent],
providers: [{ provide: ClienteGateway, useClass: ClienteApiService }, ListarClienteUseCase],
templateUrl: './cliente-list.component.html',
styleUrls: ['./cliente-list.component.scss']
})
export class ClienteListComponent implements OnInit {

filtros: any = { nombre: '', tipo_cliente: '', tiene_credito: null };
clientes: Cliente[] = [];
count: number = 0;
current_page: number = 1;

constructor(
private readonly listarClienteUseCase: ListarClienteUseCase,
private readonly toastService: ToastService,
private readonly modalService: NgbModal,
private readonly breadcrumbService: BreadcrumbService,
private readonly route: ActivatedRoute,
private readonly router: Router,
private readonly clienteStateService: ClienteStateService
) { }

ngOnInit(): void {
const { filtros, page } = this.clienteStateService.getState();
this.filtros = filtros || this.filtros;
this.current_page = page ?? 1;
this.loadClientes(this.current_page, this.filtros);
this.breadcrumbService.addBreadcrumb({
label: 'Lista de Cliente',
url: this.route.snapshot.url.join('/'),
nivel: 2,
});
}

loadClientes(page: number, filtros: any): void {
this.listarClienteUseCase.execute(page, filtros).subscribe({
next: (response) => {
this.clientes = response.results;
this.count = response.count;
this.current_page = response.current_page;
this.clienteStateService.saveState({ filtros: this.filtros, page: this.current_page });
},
error: (err) => {
this.toastService.error('Error al cargar clientes:', err);
},
});
}

onPageChange(page: number): void {
this.current_page = page;
this.clienteStateService.saveState({ filtros: this.filtros, page: this.current_page });
this.loadClientes(this.current_page, this.filtros);
}

verDetalle(clienteId: number): void {
this.clienteStateService.saveState({ filtros: this.filtros, page: this.current_page });
this.router.navigate(['/clientes', clienteId]);
}

trackByClienteId(index: number, cliente: Cliente): number {
return cliente.id;
}

openFiltrosCliente(content: TemplateRef) {
const modalRef = this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', scrollable: true, size: 'lg' });
modalRef.result.then((filtros: any) => {
if (filtros) {
this.filtros = filtros;
this.current_page = 1;
this.loadClientes(this.current_page, this.filtros);
}
}, (reason) => {
console.log('Modal cerrado:', reason);
});
}
}
< /code>
И это моя служба < /p>

@Injectable({
providedIn: 'root'
})
export class ClienteStateService {

private readonly stateKey = 'clienteListState';

constructor() { }

saveState(state: { filtros: any; page: number }): void {
localStorage.setItem(this.stateKey, JSON.stringify(state));
}

getState(): { filtros: any; page: number } {
const storedState = localStorage.getItem(this.stateKey);
if (storedState) {
return JSON.parse(storedState);
}
return { filtros: { nombre: '', tipo_cliente: '', tiene_credito: null }, page: 1 };
}

clearState(): void {
localStorage.removeItem(this.stateKey);
}
}

Я ценю любую помощь, которую вы можете мне оказать, большое спасибо.


Подробнее здесь: https://stackoverflow.com/questions/793 ... calstorage