Correct way to Fetch/Pass values in a Resolver | Angular 10/11

Question

So, I'm trying to get this data into a component before it begins to load so I can set some things before the view loads. But I'm confused as to how this resolver works, what it returns and how to read it.

I don't get the right data types and I'm not sure how to properly call this fetch so I can end up with a Array to then use to push into my component.

So the Resolver:

import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from "@angular/router";
import {Observable} from "rxjs";
import {Injectable} from "@angular/core";
import {EntryService} from "../app/entry.service";
import { Entrymodel } from "./entry.model";

@Injectable()
export class SinglePostResolver implements Resolve<any>{
 entries :Entrymodel[] = [];
  constructor(
    private entry:EntryService,
  ){

  }

  resolve(): Observable<any>//:Observable<EntryModel>{    
      return this.entry.getAventry()
  }

}

Entry model looks like this

export class Entrymodel {
    id: string;
    surname: string;
    color: string;
    startDate: Startdate;
    endDate: Enddate;
    info: string;
    status?: string;
    inbet?: Inbetween[];
    editing?: boolean;
}

export class Startdate{
    day: string;
    month: string;
    year: string;
}

export class Enddate{
    day: string;
    month: string;
    year: string;
}

export class Inbetween{
    day: string;
    month: string;
    year: string;
}

The Fetch:

  getAventry(){
    return this.firestore.collection('entry', x => x.where('status' , '==', 'Attending')).snapshotChanges();
  }

Where I'm trying to get to:

ngOnInit(): void{
  this.route.data.subscribe( (data) => { 
   
  });
   console.log(this.entries)

  }

The route:

  { path: 'calendar', component: CalendarComponent, resolve: { singlePost: SinglePostResolver}}

So, what is confusing for me here is how to correctly call the fetch in the resolver.

Should I subscribe/pipe? I'm not sure how to handle it and then how do I adjust what the resolver returns to me in the route? E.G Getting that data into an array to use.

I have tried a couple of completely silly things. I've read through Observable and the angular docs on rxjs and I mostly understand what they mean by observables and requiring a sub to start the stream but I'm just confused with how to handle the more complex version of them when I have Interfaces/Classes I want to use with them..

ginalx · Accepted Answer · 2021-02-08 17:31:46Z

1

Your data will be of type Observable<{ singlePost: any }> just because your declared so in the routing. You shouldn't be having a problem if ActivatedRoute is injected properly.

import { ActivatedRoute} from '@angular/router';

// ...

constructor(readonly route: ActivatedRoute) {}

ngOnInit(): void {
  (this.route.data as Observable<{ singlePost: any }>).subscribe((data) => { 
   console.log(data.singlePost);
  });
}

Maybe you should double check what exactly is that which you are returning because it doesn't ring a bell for me. (Put a type instead of any so that it helps you understand or anyone else trying to read this)

edited Feb 8, 2021 at 17:31

answered Feb 8, 2021 at 17:04

ginalx

2,3071 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Someguy Over a year ago

I understand that, Makes more sense in that case, So would u like for me to asign a type that id use on the resolver? I have tried specifying types but It just requires properties then which I cant assign as im just fetching

ginalx Over a year ago

If snapshotChanges() returns an observable of X, then console.log(data.singlePost) should log that X. If not, then getAventry() is not working properly. Also, I suspect you are expecting an array of EntryModel (EntryModel[]), not a single one.

Collectives™ on Stack Overflow

Correct way to Fetch/Pass values in a Resolver | Angular 10/11

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related