在 Resolver 中 Fetch/Pass 值的正确方法 | Angular 10/11

Question

所以，我试图在组件开始加载之前将这些数据放入组件中，这样我就可以在视图加载之前设置一些东西。但是我对这个解析器是如何工作的，它是什么 returns 以及如何阅读它感到困惑。

我没有获得正确的数据类型，我不确定如何正确调用此提取，以便我最终得到一个数组，然后用于推送到我的组件中。

所以解析器：

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()
  }

}

入门模型是这样的

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;
}

获取：

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

我想去的地方：

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

  }

路线：

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

所以，这里让我感到困惑的是如何在解析器中正确调用提取。

我应该subscribe/pipe吗？我不确定如何处理它，然后如何在路由中为我调整解析器 returns？ E.G 将该数据放入数组中以供使用。

我已经尝试了一些完全愚蠢的事情。我已经通读了 Observable 和 rxjs 上的 angular 文档，我基本上理解了它们所说的 observables 和需要 sub 来启动流的含义，但我只是对如何处理它们的更复杂版本感到困惑我有 Interfaces/Classes 我想和他们一起使用..

Answer 1

您的数据将是 Observable<{ singlePost: any }> 类型，只是因为您在路由中这样声明。如果 ActivatedRoute 注入正确，你应该不会有问题。

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

// ...

constructor(readonly route: ActivatedRoute) {}

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

也许你应该仔细检查一下你要返回的到底是什么，因为它不会为我敲响警钟。（输入一个类型而不是 any，这样它可以帮助您理解或任何其他试图阅读此内容的人）

在 Resolver 中 Fetch/Pass 值的正确方法 | Angular 10/11

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

angular

typescript

angular2-routing

angular-resolver