如何将逻辑从组件移动到服务(角度)

Question

我有将数据保存到本地存储的组件，我想将所有逻辑从组件移动到服务。 这是我的组件： 我想将所有东西从ngOnInit转移到服务。

import { Component, OnInit, Input } from '@angular/core';
import { Report } from 'src/app/shared/entity/report.entity';
import {Utils} from '../../../../shared/utils';
@Component({
selector: 'app-kit-header',
templateUrl: './kit-header.component.html',
styleUrls: ['./kit-header.component.sass']
})
export class KitHeaderComponent implements OnInit {
@Input() reportData: Report;
public dateCreate: any;
public year: string;
public deadLine: any;
public typeName: string;
public hour: any;
public date: any;
constructor() { }
ngOnInit() {
if (localStorage.getItem('dateCreate') === null) {
localStorage.setItem('dateCreate', JSON.stringify(this.reportData.dateCreated));
localStorage.setItem('year', JSON.stringify(this.reportData.year));
localStorage.setItem('deadLine', JSON.stringify(this.reportData.deadLine));
localStorage.setItem('typeName', this.reportData.name);
this.dateCreate = localStorage.getItem('dateCreate');
this.year = localStorage.getItem('year');
this.deadLine = localStorage.getItem('deadLine');
this.typeName = localStorage.getItem('typeName');
} else {
this.dateCreate = localStorage.getItem('dateCreate');
this.year = localStorage.getItem('year');
this.deadLine = localStorage.getItem('deadLine');
this.typeName = localStorage.getItem('typeName');
}
this.deadLine = new Date(JSON.parse(this.deadLine));
this.hour = new Date(JSON.parse(this.dateCreate)).toLocaleTimeString();
this.date = new Date(JSON.parse(this.dateCreate)).toLocaleDateString();
}

formatedDate(deadLine: Date) {
return Utils.parseHebrewDate(deadLine);
}
}

服务：

saveKitData(dateCreated, year, deadLine, name) {
???
}

谢谢

Answer 1

您需要将整个逻辑移动到该方法，而不是传递每个属性，而是可以将整个对象传递reportData

saveKitData(reportData : any) {
if (localStorage.getItem('dateCreate') === null) {
localStorage.setItem('dateCreate', JSON.stringify(reportData.dateCreated));
.....
this.dateCreate = localStorage.getItem('dateCreate');
this.year = localStorage.getItem('year');
this.deadLine = localStorage.getItem('deadLine');
this.typeName = localStorage.getItem('typeName');
} else {
this.dateCreate = localStorage.getItem('dateCreate');
this.year = localStorage.getItem('year');
this.deadLine = localStorage.getItem('deadLine');
this.typeName = localStorage.getItem('typeName');
}
this.deadLine = new Date(JSON.parse(this.deadLine));
this.hour = new Date(JSON.parse(this.dateCreate)).toLocaleTimeString();
this.date = new Date(JSON.parse(this.dateCreate)).toLocaleDateString();
}

Answer 2

最好编写一个服务并使用依赖注入在您的组件中使用它，如下所示： 首先，将数据封装在一个类中：

export class CustomDataDto{
public dateCreate: any;
public year: string;
public deadLine: any;
public typeName: string;
public hour: any;
public date: any;
}

然后将代码移动到服务中：

@Injectable()
export class YourDataStorageService {
public CustomDataDto myGetDataMethod(reportData : any){
localStorage.setItem('dateCreate',         
JSON.stringify(reportData.dateCreated));
.....
let data=new CustomDataDto ();
if (localStorage.getItem('dateCreate') === null) {
localStorage.setItem('dateCreate', 
JSON.stringify(this.reportData.dateCreated));
localStorage.setItem('year', JSON.stringify(this.reportData.year));
localStorage.setItem('deadLine', JSON.stringify(this.reportData.deadLine));
localStorage.setItem('typeName', this.reportData.name);
data.dateCreate = localStorage.getItem('dateCreate');
data.year = localStorage.getItem('year');
data.deadLine = localStorage.getItem('deadLine');
data.typeName = localStorage.getItem('typeName');
} else {
data.dateCreate = localStorage.getItem('dateCreate');
data.year = localStorage.getItem('year');
data.deadLine = localStorage.getItem('deadLine');
data.typeName = localStorage.getItem('typeName');
}
data.deadLine = new Date(JSON.parse(this.deadLine));
data.hour = new Date(JSON.parse(this.dateCreate)).toLocaleTimeString();
data.date = new Date(JSON.parse(this.dateCreate)).toLocaleDateString();
return data;
}
}

在下一步中，您必须在 NgModule 中声明它：

@NgModule({
providers: [YourDataStorageService ];
})

最后，您可以在组件中使用它：

export class KitHeaderComponent implements OnInit {
constructor( injector: Injector,
private _yourDataStorageServiceProxy: YourDataStorageService) {
super(injector);      
}
ngOnInit() {
let data = this._yourDataStorageServiceProxy.myGetDataMethod();
}
}