Angular 5 - хранение данных в сервисе вместо компонента? - PullRequest
Новая
       19

Angular 5 - хранение данных в сервисе вместо компонента?

0 голосов
/ 29 августа 2018

В моем приложении AngularJS 1.5 у меня есть некоторые данные контроллера, которые напрямую связаны с данными сервиса. Когда пользователь переходит на страницу, контроллер вызывает init в службе, а затем вызывается служба данных для извлечения данных с сервера.

* 1003 Е.Г. * 

//inside controller
$scope.data = ClockingMenuService.data;
ClockingMenuService.init();

//inside service
function ClockingMenuService() {

    var dataObj = {};

    var defaultData = {
        startWeek: null,
        endWeek: null,
        statusCode: 0
    };

    Object.assign(dataObj, defaultData);

    return {
        data: dataObj,
    };

   function init() {

        ClockingDataService
            .getClockingDataFromServer(dataObj.startWeek, dataObj.endWeek)
            .then(function(response) { dataObj = response; })
            .catch(handleError);
   }

}

Я работаю над переносом приложения на Angular 5, и я хотел бы получить аналогичную функциональность.

Как этот тип вещей может быть реализован в Angular 5? Лучше ли размещать данные в компоненте или в сервисе?

1 Ответ

0 голосов
/ 29 августа 2018

Компонент должен отвечать только за отображение данных в DOM или за взаимодействие с пользователем. Все остальное в идеале должно быть делегировано на службу. Компонент должен иметь минимум знаний о том, откуда служба будет получать данные.

Вот так лучше разделить проблемы.

В вашем конкретном случае вы должны вызывать метод службы внутри Компонента. Это можно сделать, внедрив службу в класс Component как зависимость.

Итак, давайте предположим, что в вашем сценарии у вас есть служба с именем ClockingDataService, и ваш ClockingMenuComponent зависит от ClockingDataService для получения данных, вы можете выставить метод getClockingDataFromServer в вашем ClockingDataService и вызвать его из метода вашего ClockingMenuComponent, который должен реагировать на изменения в startWeek и endWeek.

Для простоты я создал AppComponent, чтобы высмеивать ClockingMenuComponent и ngOnInit, чтобы высмеивать обработчик функций для изменений startWeek и endWeek.

Вот вам StackBlitz для справки.

...