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

Question

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

这是我的解析器服务：

@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：食物=未定义。

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

食物解析器：记录正确的食物清单和我想要查找的正确项目。

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

当我只是 return getFood 方法而不改变它以便它显示整个食物集合时，它工作得很好。由于这个和 foodResolver 日志的延迟，我假设解析器需要 return 一个可观察的。所以我将函数包装在一个新的可观察对象中：

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 中，food 是一个订阅者。现在我没主意了。如果有人可以帮助我，将不胜感激。谢谢。

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

Answer 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"])
      )
    )
  }
}

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

Trying to get specific parts of data inside route resolver Angular

resolver

angular