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

Posted

技术标签:

【中文标题】Angular 5 - 将数据存储在服务而不是组件中?【英文标题】:Angular 5 - storing data in the service instead of the component? 【发布时间】: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 中实现? 将数据放在组件中还是服务中是最佳做法?

【问题讨论】:

【参考方案1】:

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

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

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

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

为简单起见,我让 AppComponent 模拟 ClockingMenuComponentngOnInit 来模拟函数处理程序以更改 startWeekendWeek

这里有一个StackBlitz 供您参考。

【讨论】:

以上是关于Angular 5 - 将数据存储在服务而不是组件中?的主要内容,如果未能解决你的问题,请参考以下文章

Angular 5:从组件生成 DIV 而不是新标签

Angular 5 - 刷新组件(不是整个页面)

Angular 5通过服务在组件之间进行通信

将Angular2服务注入组件基类

如何在应用程序首先加载而不是Angular 5中的appComponent时显示登录组件

Angular 路由器附加组件数据而不是替换组件