CODEWITHSUNDEEP
angulartypescriptangular2-routingangular-resolver
Someguy
Someguy

Reputation: 414

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

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..

Upvotes: 0

Views: 1146

Answers (1)

ginalx
ginalx

Reputation: 2247

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)

Upvotes: 1

Related Questions