Организация сервисов Angular?

В родительском компоненте есть три компонента:

1. Сортировка
2. Фильтр
3. Список

Когда пользователь делает изменения в Сортировке или Фильтре - данные кладутся в сервис SettingsService.

Далее этот сервис используется в компоненте Список - чтобы выгрузить значения по собранному фильтру и сортировки.

Проблема в том, что на другой странице - есть компонент поиска, который тоже должен заполнить SettingsService выбранными значениями.

Как решение - сделать SettingsService глобальным. Что сделать не могу - потому что в другом компоненте такой же функционал. Для которого нужно хроанить свой набор настроек.

Как правильно организовать архитектуру?

Можно сделать две копии SettingsService и SettingsService2 - но в таком случае дубликат кода.

Может сделать два сервиса глобальными:
[root]
SettingsService1 extends Base {
        settingsSorting;
       settingsFilter;
}
[root]
SettingsService1 extends Base {
       settingsSorting;
       settingsFilter;
}


А в Base вынести всю логику установки Сортировки и Фильтров?
  • Вопрос задан
  • 66 просмотров
Решения вопроса 1
lynxp9
@lynxp9
Full-stack developer
Не совсем понятна из описания архитектура. Из того, что понял могу предложить следующее:

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

When you register a provider with a specific NgModule, the same instance of a service is available to all components in that NgModule. To register at this level, use the providers property of the @NgModule() decorator,

@NgModule({
  providers: [
  BackendService,
  Logger
 ],
 ...
})


2. Сделать сервис синглтоном

By default, the Angular CLI command ng generate service registers a provider with the root injector for your service by including provider metadata in the @Injectable() decorator. The tutorial uses this method to register the provider of HeroService class definition.

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


и для настроек settingsSorting и settingsFilter использовать хэшмап

settings = {
  settingsForComp1: {
    settingsSorting,
    settingsFilter
  },
  settingsForComp2: {
    settingsSorting,
    settingsFilter
  }
}


Про сервисы есть здесь https://angular.io/guide/architecture-services
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
15 авг. 2020, в 01:45
95000 руб./за проект
14 авг. 2020, в 22:47
15000 руб./за проект
14 авг. 2020, в 22:40
15000 руб./за проект