0

У каждой страницы есть несколько get запросов. К примеру, есть у меня 4 get запроса на получение данных (first, second, third, fourh), я знаю, что first и second относится к странице под роутом "firstPage", а third, fourth - к странице под роутом "secondPage". Я не хочу сразу делать все get запросы (то есть, я хочу, если перешел по роуту secondPage, то и получать его данные).

{
 firstPage: {
  one: [],
  two: []
 },
 secondPage: {
  three: [],
  four: []
 }
}

Где или как бы разместить этот единый общий объект всех страниц, чтобы я мог в любом компоненте узнать какие массивы лежат в той или иной странице (то есть, обращаясь к полю объекта secondPage моя ide мне могла бы подсказать, что в ней два массива)?

1 ответ 1

1

Создайте просто синглтон, который будет шарить данные по всему приложению:

import { Injectable } from '@angular/core';

import { BehaviorSubject, Observable } from 'rxjs';

interface Data {
    firstPage: {
        one: any[];
        two: any[];
    };
    secondPage: {
        three: any[];
        four: any[];
    }
}

@Injectable({ providedIn: 'root' })
export class DataService {
    private data$ = new BehaviorSubject<Data>({
        firstPage: {
            one: [],
            two: []
        },
        secondPage: {
            three: [],
            four: []
        }
    });

    public getDataStream(): Observable<Data> {
        return this.data$.asObservable();
    }

    public getData(): Data {
        return this.data$.getValue();
    }

    public getDataByPage(page: string) {
        return this.getData()[page];
    }

    public setData(page: string, data: object): void {
        const currentData = this.getData();

        this.data$.next({
            ...currentData,
            [page]: data
        });
    }
}

Используем BehaviorSubject для кеширования. Далее, если вы говорите, что знаете какие данные относятся к каким компонентам то просто делайте запросы и сеттите новое значение:

// first.component.ts

import { Component } from '@angular/core';

import { tap } from 'rxjs/operators';

@Component({
    selector: 'app-first',
    templateUrl: './first.component.html'
})
export class FirstComponent {
    constructor(private api: ApiService, private dataService: DataService) {
        this.api.getDataForFirstPage().pipe(
            tap((data) => {
                this.dataService.setData('firstPage', data);
                // предполагаем, что `data` это объект со свойствами `one, two`
            })
        ).subscribe(....);
    }
}

P.S. - можете также добавить проверку на то, что данные уже загрузились, чтобы не делать повторно запрос при N-ом инициализации компонента.

3
  • Спасибо! Была идея с синглтоном, но не знал, как бы его корректно реализовать. Буду разбираться!
    – bruce
    2 дек 2018 в 15:23
  • Вы не подскажите, в чем принцип использования tap? Какую роль он несет? При каких условиях его использовать?
    – bruce
    2 дек 2018 в 15:40
  • @bruce, learnrxjs.io/operators/utility/do.html 2 дек 2018 в 18:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.