Question

在AngularJS 1.5应用程序中，我有一些控制器数据直接链接到服务数据。当用户点击页面时，控制器会在服务中调用init，然后会调用数据服务以从服务器中检索数据。

例如

//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中实现这种事情？将数据放入组件或服务中是最佳实践吗？

Answer 1

组件仅应负责向DOM显示数据或对用户交互做出反应。最好将所有休息都委派给服务。该组件应该对服务将要从哪里获取数据的了解最少。

这样可以更好地分离关注点。

对于您的特定情况，您应该在Component内调用服务方法。可以通过将服务作为依赖项注入到Component类中来实现。

因此，假设在您的方案中，您有一个名为ClockingDataService的服务，并且您的ClockingMenuComponent依赖于ClockingDataService来获取数据，则可以公开方法{{ 1}}，然后从ClockingMenuComponent的方法调用它，该方法应该对getClockingDataFromServer和ClockingDataService中的更改做出反应。

为简单起见，我使AppComponent能够模拟startWeek和endWeek来模拟函数处理程序，以更改ClockingMenuComponent和ngOnInit。

这里是StackBlitz供您参考。

Angular 5-将数据存储在服务中而不是组件中？

1 个答案: