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.
- Rejestracja:prawie 7 lat
- Ostatnio:prawie 3 lata
- Postów:74
0
TypeScript 
Angular 
- Rejestracja:prawie 7 lat
- Ostatnio:prawie 3 lata
- Postów:74
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ć ?