Question

在路由到集合中的特定项目时，我尝试使用解析器将数据附加到路由中。我将数据存储在本地服务中，并在该服务上使用了一种方法来查找名称与我正在搜索的路线参数匹配的商品。这可以完美地工作，但是后来我将其更改为尝试使用对数据库的调用来获取信息。现在，我无法弄清楚如何对解析程序服务中所需的特定项目的返回数据进行排序。

这是我的解析器服务：

@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渲染错误：无法读取未定义的属性名称。

当我只返回getFood方法而不更改它，以便它显示整个食物集合时，它可以完美地工作。由于这个原因和foodResolver日志上的延迟，我假设解析器需要返回一个可观察的。所以我将函数包装在一个新的可观察对象中：

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中获取数据的特定部分

1 个答案: