Angular: как избежать загрузки одних и тех же данных в несколько компонентов?

Question

Фон

У меня архитектурная проблема в angular Не могу понять.

Скажем, у нас есть следующие модели:

• Пользователь (имя, пол и т. Д. c.)
• Курсы (user_id, заголовок, тема и т. Д. c.)
• Дружба (user1_id, user2_id),
• Сообщения чата (from_user_id, to_user_id)

У нас есть сервис для каждой модели для связи с соответствующим сервисом в бэкэнде.

Одной из основных функций приложения является панель инструментов, которая может иметь несколько различных «плиток» (компонентов). Каждая плитка представляет что-то о данном пользователе. Например, у нас может быть плитка с именем «CoreInfoTile», которая будет отображать имя и пол пользователя. Или плитки с именами «LatestChatMessagesTile», «TopFriendshipsTile», «NextCourseSessionTile» и т. Д. c ..

Все компоненты плитки имеют общий вход: для пользователя отображаются данные. Обратите внимание, что панель инструментов настраивается, поэтому одна и та же плитка может появляться много раз для одного и того же пользователя и для разных пользователей.

Проблема

Таким образом, компонент панели мониторинга запускается с загрузки списка пользователей с использованием UserService. На самом деле у нас намного больше моделей, и поэтому мы не будем загружать все курсы, дружбу, сообщения чата и т. Д. c. прежде чем иметь плитку, которая действительно нуждается в этих данных. Таким образом, нам нужен компонент плитки, чтобы иметь возможность подписываться на что-то вроде:

user.loadCourses() // Don't know if this is necessary..
user.courses.subscribe(courses => {
   this.courses = courses;
});

И мы должны убедиться, что пользовательский объект загружает курсы только один раз, даже если 10 плиток запрашивают одни и те же данные.

Идея

Одной из идей для создания этой функциональности является создание класса UserHandle (обычный класс, а не сервис) и преобразование всех пользовательских объектов в него, когда они впервые Скачано:

export class UserHandle {
    data: User // the user model

    private coursesSubject: BehaviorSubject<Course[]>;
    public courses: Observable<Course[]>;

    constructor(user: User, ..){..}

    loadCourses() {
        const coursesCurrent = this.coursesSubject.getValue();
        if (!coursesCurrent) {
            const courses = await API CALL? But can't use service :( 

            this.coursesSubject.next(courses);
        }

    });
}
}

Проблема здесь в том, что я не могу внедрить свои сервисы для выполнения вызовов API, потому что это обычный класс? Будет ли плохой практикой вводить службу вручную в UserHandle?

Надеюсь, все это имеет смысл :-)