试图在路由解析器Angular中获取数据的特定部分答案

【问题标题】：Trying to get specific parts of data inside route resolver Angular试图在路由解析器Angular中获取数据的特定部分
【发布时间】：2019-10-04 13:55:26
【问题描述】：

当路由到集合中的特定项目时，我正在尝试使用解析器将数据附加到我的路由。我将数据本地存储在服务中，并使用服务上的方法来查找名称与我正在搜索的路由参数匹配的项目。这非常有效，但后来我将其更改为尝试使用对数据库的调用来获取信息。现在我无法弄清楚如何对解析器服务中我想要的特定项目的返回数据进行排序。

这是我的解析器服务：

@Injectable()
export class FoodResolver implements Resolve<any> {
    constructor(private foodService: FoodService) {}

    resolve(route: ActivatedRouteSnapshot) {
        this.foodService.getFood().subscribe((data) => {
            return data.find((food) => {
                return food.name == route.params["name"];
            })
        })
    }
}

getFood 打了一个简单的电话：return this.http.get<Array<FoodModel>>("/api/foods") 我正在使用 InMemoryWebApi 模拟数据库。

在我的组件中，我在 ngOnInit 中获取数据：

    ngOnInit(): void {
        this.food = this.route.snapshot.data["food"];
    }

如果有人能指出我哪里出错了，我将不胜感激。我在整个过程中添加了控制台日志。顺序：

ngOnInit: food = undefined.

Html 渲染错误：无法读取未定义的属性名称。

食物解析器：记录正确的食物列表和我想找到的正确项目。

Html 渲染错误：无法读取未定义的属性名称。

当我只返回 getFood 方法而不更改它以显示整个食物集合时，它可以完美运行。由于这个原因以及 foodResolver 日志的延迟，我认为解析器需要返回一个 observable。所以我将函数包装在一个新的 observable 中：

resolve(route: ActivatedRouteSnapshot) {
    const observable = new Observable((observer) => {
        observer.next(
            this.foodService.getFood().subscribe((data) => {
                return data.find((food) => {
                    return food.name == route.params["name"];
                })
            })
         );
         observer.complete();
       })
       return observable;
    }

在执行此操作时，所有错误都消失了，但没有显示任何信息。在 ngOninit 中，食物是订阅者。现在我没有主意了。如果有人可以帮助我，将不胜感激。谢谢。

旁注：如果可能的话，为了可重用性，我不希望在组件本身内部过滤列表。此外，我没有使用 id 设置我的数据，因此无法调用 http.get("/food/lasagna") 例如

【问题讨论】：

标签： angular resolver

【解决方案1】：

resolve 的签名建议返回 Observable<T>/Promise<T>。你没有返回任何东西。

试试这个：

import { map } from 'rxjs/operators';
...

@Injectable()
export class FoodResolver implements Resolve < any > {
  constructor(private foodService: FoodService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return this.foodService.getFood().pipe(
      map(
        data => data.find(food => food.name == route.params["name"])
      )
    )
  }
}

【讨论】：