Angular app i synchronizacja danych

0

Cześć, mam taki początek aplikacji : https://github.com/CienZZZ/Angular-Front-App
Prosiłbym was o podpowiedzi w jaki sposób mogę rozwiązać synchronizację danych (albo przynajmniej ładowanie danych z serwera), podczas nawigacji,czyli przełączania pomiedzy komponentami, ich edycja itp. Aktualnie mam to robione po naciśnieciu przycisku "Fetch Data" i zapisywanie "Save Data", ale chciałbym to mieć zautomatyzowane. W projekcie używam @Ngrx.

0

resolver

0

zrobiłem to tak, używając Store i OnInit oraz OnDestroy

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import * as fromApp from '../store/app.reducer';
import * as CompaniesActions from './store/company.actions';

@Component({
  selector: 'app-companies',
  templateUrl: './companies.component.html',
  styleUrls: ['./companies.component.css']
})
export class CompaniesComponent implements OnInit, OnDestroy {

  constructor(private store: Store<fromApp.AppState>) { }

  ngOnInit() {
    this.store.dispatch(new CompaniesActions.FetchCompanies());
  }

  ngOnDestroy() {
    this.store.dispatch(new CompaniesActions.StoreCompanies());
  }

}

mam też Resolver

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Store } from '@ngrx/store';
import { Actions, ofType } from '@ngrx/effects';
import { take, map, switchMap } from 'rxjs/operators';
import { of } from 'rxjs';

import { Company } from './company.model';
import * as fromApp from '../store/app.reducer';
import * as CompaniesActions from '../companies/store/company.actions';

@Injectable({providedIn: 'root'})
export class CompaniesResolverService implements Resolve<Company[]> {
  constructor(
    private store: Store<fromApp.AppState>,
    private actions$: Actions
  ) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.store.select('companies').pipe(
      take(1),
      map(companiesState => {
        return companiesState.companies;
      }),
      switchMap(companies => {
        if (companies.length === 0) {
          this.store.dispatch(new CompaniesActions.FetchCompanies());
          return this.actions$.pipe(
            ofType(CompaniesActions.SET_COMPANIES),
            take(1)
          );
        } else {
          return of(companies);
        }
      })
    );
  }
}

i w routingu go tak podłączyłem:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CompaniesComponent } from './companies.component';
import { AuthGuard } from '../auth/auth.guard';
import { CompanyStartComponent } from './company-start/company-start.component';
import { CompanyEditComponent } from './company-edit/company-edit.component';
import { CompanyDetailComponent } from './company-detail/company-detail.component';
import { CompaniesResolverService } from './companies-resolver.service';

const routes: Routes = [
  {
    path: '',
    component: CompaniesComponent,
    canActivate: [AuthGuard],
    children: [
      { path: '', component: CompanyStartComponent },
      { path: 'new', component: CompanyEditComponent },
      {
        path: ':id',
        component: CompanyDetailComponent,
        resolve: [CompaniesResolverService]
      },
      {
        path: ':id/edit',
        component: CompanyEditComponent,
        resolve: [CompaniesResolverService]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CompaniesRoutingModule {

}

ale chyba gdzieś coś pominąłem bo nie ładuje danych ten resolver, jakiś przykład z użyciem takiego resolvera co ładuje i zapisuje dane mogę prosić ?

1 użytkowników online, w tym zalogowanych: 0, gości: 1