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

【问题标题】：Angular 5 - storing data in the service instead of the component?Angular 5 - 将数据存储在服务而不是组件中？
【发布时间】：2019-02-04 00:55:52
【问题描述】：

在我的 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 中实现？将数据放在组件中还是服务中是最佳做法？

【问题讨论】：

标签： angular service components

【解决方案1】：

组件应该只负责向 DOM 显示数据或对用户交互做出反应。理想情况下，所有休息都应该委托给服务。组件应该至少不知道服务将从何处获取数据。

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

对于您的具体情况，您应该在组件内调用服务方法。这可以通过将服务作为依赖项注入到 Component 类中来完成。

假设在您的场景中，您有一个名为ClockingDataService 的服务，而您的ClockingMenuComponent 依赖于ClockingDataService 来获取数据，您可以在ClockingDataService 中公开一个方法getClockingDataFromServer并从应该对 startWeek 和 endWeek 中的更改做出反应的 ClockingMenuComponent 方法调用它。

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

这里有一个StackBlitz 供您参考。

【讨论】：