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
并从应该对 startWeek
和 endWeek
中的更改做出反应的 ClockingMenuComponent 方法调用它。
为简单起见,我让 AppComponent 模拟 ClockingMenuComponent
和 ngOnInit
来模拟函数处理程序以更改 startWeek
和 endWeek
。
这里有一个StackBlitz 供您参考。
【讨论】:
以上是关于Angular 5 - 将数据存储在服务而不是组件中?的主要内容,如果未能解决你的问题,请参考以下文章