photo.list.resolver.ts
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { Photo } from '../photo';
import { PhotoService } from '../photo/photo.service';
@Injectable({providedIn: 'root'})
export class PhotoListResover implements Resolve <Observable<Photo[]>>{
constructor(private service: PhotoService){}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Photo[]>{
const userName = route.params.userName;
return this.service.listFromUser(userName);
}
}
app.routingmodules.ts
import { NgModule } from "@angular/core";
import {Routes, RouterModule} from '@angular/router';
import { PhotoListComponent } from "./photos/photo-list/photo-list.component";
import { PhotoFormComponent } from "./photos/photo-form/photo-form.component";
import {NotFoundComponent} from './errors/not-found/not-found.component';
import { PhotoListResover } from './photos/photo-list/photo-list.resolver';
const routes: Routes = [
{
path: 'user/:userName',
component: PhotoListComponent,
resolve:{
photos: PhotoListResover
}
},
{
path: 'p/add', component: PhotoFormComponent
},
{
path: '**', component: NotFoundComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModules{}
photo-list.component
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Photo } from '../photo/photo';
import { PhotoService } from '../photo/photo.service';
@Component({
selector: 'app-photo-list',
templateUrl: './photo-list.component.html',
styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {
photos: Photo[] = [];
filter: string = '';
constructor(
// private photoSercive: PhotoService,
private activatedRoute: ActivatedRoute
) { }
ngOnInit(): void {
//const userName = this.activatedRoute
//.snapshot
//.params
//.userName;
//this.photoSercive
//.listFromUser(userName)
//.subscribe(photos =>this.photos = photos);
this.photos = this.activatedRoute.snapshot.data.photos;
}
}
Galera o meu photo-list.component com resolve, não esta passando a lista de fotos. Comentei acima da chamada do resolver o código antigo sem ele. Ja verifiquei mais de 10 vezes e não consigo achar o erro no console exibe.
`
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
PhotoListComponent.html:16 ERROR TypeError: Cannot read property 'length' of undefined
at PhotosComponent../src/app/photos/photo-list/photos/photos.component.ts.PhotosComponent.groupColumns (photos.component.ts:25)
at PhotosComponent../src/app/photos/photo-list/photos/photos.component.ts.PhotosComponent.ngOnChanges (photos.component.ts:19)
at checkAndUpdateDirectiveInline (core.js:9239)
at checkAndUpdateNodeInline (core.js:10507)
at checkAndUpdateNode (core.js:10469)
at debugCheckAndUpdateNode (core.js:11102)
at debugCheckDirectivesFn (core.js:11062)
at Object.eval [as updateDirectives] (PhotoListComponent.html:16)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
at checkAndUpdateView (core.js:10451)
View_PhotoListComponent_0 @ PhotoListComponent.html:16
proxyClass @ compiler.js:10173
push../nodemodules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:11306
push../nodemodules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719
(anonymous) @ core.js:4578
./nodemodules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
./node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../nodemodules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779
push../nodemodules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578
(anonymous) @ core.js:4462
./node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:3820