Как запомнить значение переменной Angular?

Question

[Александр]

Всем привет! Скорее всего делаю, что-то не так.

Есть каталог новостей. Новости получаю с сервера в json формате. Создаю subject переменные в сервисах, подписываюсь в компонентах. Так же есть компонент для фильтрации новостей по разделам. Разделы прилетают с сервера вместе с новостями. Все хранится в сервисах.

Проблема следующая. Когда перехожу в детальный просмотр новости, и возвращаюсь обратно, почему-то затираются переменные, которые должны содержать список разделов для фильтра и новости. И подписка на Subject переменные не отрабатывает.

Код сервиса новостей

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { SectionsService } from './sections.service';

@Injectable({
  providedIn: 'root',
})

export class NewsService {
  item: [] = [];
  news: any[] = [];

  activeNews = new Subject<any[]>();

  constructor(private sectionsService: SectionsService) {
    this.sectionsService.activeSection.subscribe(section => {
      if (section != "") {
        this.activeNews.next(this.news.filter(items => items.name_section === section));
      } else {
        this.activeNews.next(this.news);
      }
    })
  }

  public newsesList(list: []) {
    this.item = list;
  }

  public listItems(items: any) {
    this.news = items;
    this.sectionsService.getSections(items);
    this.activeNews.next(items);
  }
}

Код компонента:

import { Component, OnInit } from '@angular/core';
import { NewsService } from '../news.service';

@Component({
  selector: 'app-news-list',
  templateUrl: './news-list.component.html',
  styleUrls: ['./news-list.component.scss']
})
export class NewsListComponent implements OnInit {

  nameComponent: string= "News list message: ";
  
  newsActive: any[] = [];

  colNews: number = 9;

  constructor(private newsesService: NewsService) {}

  ngOnInit(): void {
    this.newsesService.activeNews.subscribe(newses => {
      this.newsActive = newses;
    })
  }

  activeElement(item: []): void {
    this.newsesService.newsesList(item);
  }

  addNews(): void {
    this.colNews = this.colNews + 9;
  }
}

Если поможете решить проблему, с новостями, то смогу решить проблему с фильтром самостоятельно.

Answer 1

[lssssssssssl]

Я, например, делаю такой сервис для хранения стейта текущей страницы.

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

  private contentPage = new BehaviorSubject<number>(1);

  public changeContentPage(page: number): void {
    this.contentPage.next(page);
  }
  public getContentPage(): number {
    return this.contentPage.getValue()
  }
}

Соответственно потом в компоненте можно вот так получать:

async ngOnInit() {
    this.currentPage = this.dashboardStateService.getContentPage()
  }

Ну или изменять страницу в удобном месте методом this.dashboardStateService.changeContentPage(2)

Можно адаптировать и под хранение состояния фильтров да и чего угодно в принципе.

p.s. Писал сразу от руки, может где-то ошибка в синтаксисе есть.
p.s.s. Ну вообще, думаю, есть способ гораздо лучше, ежели тот, который я написал, выглядит не очень.

Comments

[Александр]

Сейчас попробую. Может поможет в моем случае

[Александр]

Помогло решение). Только в моем случае используется вместе с подпиской).

Спасибо!

Answer 2

[Антон Швец]

getData() {
  return this.http.get(url).pipe(shareReplay())
}

и не надо ничего лишнего городить, никаких сабжектов

Comments

[Александр]

Мне нужно, что бы к серверу было только 1 обращение за все время пользования каталогом.

Если бы я каждый раз хотел обращаться к серверу, я бы так и делал.

[Антон Швец]

Александр, так и будет одно. Нужно только результат вызова этого метода куда-нибудь записать, и пользоваться им. Внутри там такой же сабжект, только писанины меньше.