如何将逻辑从组件移动到服务（Angular）

Question

I have components that save data to local storage and i want to move all the logic from the component to service. This is my Components: I Want to move all the stuff from ngOnInit to service.

   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);
      }

    }

Service:

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

thanks

Answer 1

You need to move the whole logic to that method, instead of passing each property, you can pass the whole object 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

It is better to write a service and use dependency injection to use it in your component like below: at first, encapsulate data in a class:

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

Then move your code into a Service:

@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;
}
}

In the Next step,you must declare it in NgModule:

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

At the end, you can use it in your component:

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