Angular 7 - 重用组件来显示过滤的集合

Question

我正在尝试使用MySQL数据库开发基于Angular7的Web应用程序项目（带有食品交付的在线餐厅）。应用程序使用路由器在站点上导航和加载组件。

首先，app-routing.module的一个重要（受影响）部分：

APP-routing.module.ts

[...]  
{
path: 'menu',
component: MenuComponent,
children: [
  {
    path: '',
    redirectTo: 'categories',
    pathMatch: 'prefix'
  },
  {
    path: 'categories',
    component: ProductCategoriesComponent,
    resolve: {
      productCategories: CategoriesResolver,
      products: ProductsResolve
    },
  },
  {
    path: 'categories/:id',
    component: ProductsByCategoryComponent,
    resolve: {
      productsByCategory: ProductsResolveByCategory,
      productCategories: CategoriesResolver
    }
  },
  {
    path: '**',
    redirectTo: 'categories',
    pathMatch: 'prefix'
  }
],
  },
[...]

**用例场景如下：I。用户点击导航栏上的“菜单”导航链接 - 正在加载菜单组件：操作后的url路径：localhost：4200 / menu / categories / **

菜单component.html

<router-outlet></router-outlet>

这只是占位符来加载菜单提供的产品类别 - Angular将用户重定向到菜单/类别并加载ProductCategoriesComponent。这个使用两个解析器 - 实际上解析所有类别的产品和所有产品（因为没有选择特定的类别，它们都被加载）。

类别ID如下：1 - 开胃菜2 - 披萨3 - 意大利面4 - 饮料5 - 甜点

** II。用户选择特定类别后，将过滤整个列表，后端将返回具有请求categoryId的新对象列表：**

product.resolve.ts

@Injectable()
export class ProductsResolveByCategory implements Resolve<any> {

  constructor(private productService: ProductService) {
  }

  resolve(route: ActivatedRouteSnapshot) {
    return this.productService.getProductsByCategoryId(route.params['id']);
  }
}

当选择“开胃菜”类别时，路由将我们引导到例如：localhost：4200 / menu / categories / 1。

到目前为止，应用程序工作得非常好，但是出现了在特定条件下显示内容的问题 - 当用户处于/ menu / categories / 1并且想要选择另一个类别（例如从1更改为2）时，视图不令人耳目一新本身 - 没有加载具有不同类别ID的产品，我们仍然可以看到旧的 - 目前解决方法是再次单击菜单按钮，然后再单击所需的类别。更重要的是，点击浏览器中的“返回”（因此它应返回菜单/类别/）会抛出错误的请求（错误400），因为前端发送带有/ menu / categories / categories（double！）的请求而不是'id'。我找不到任何合理的解释为什么'id'被'categories'字取代：

products.service.ts

  public getProductsByCategoryId(id: number): Observable<Array<ProductModel>> {
   return this.http.get('/api/products/categories/' + id).pipe(map((response: Array<ProductModel>) => {
   this.productsByCategory = response;
   return this.productsByCategory;
 }));
}

产品按category.component.ts

 Component({
  selector: 'app-products-by-category',
  templateUrl: './products-by-category.component.html',
  styleUrls: ['./../products/products.component.css'],
})
export class ProductsByCategoryComponent implements OnInit {
  private productsByCategory: Array<ProductModel> = [];

  constructor(private productService: ProductService,
              private route: ActivatedRoute) {
  }

   ngOnInit() {
     if (this.route.snapshot.data['productsByCategory']) {
       this.productsByCategory = this.route.snapshot.data['productsByCategory'];
     }
   }
}

总而言之，有两个（逻辑上最可能是愚蠢的错误）问题：

1. 为什么从菜单/类别/ 1更改为菜单/类别/ 2时，未加载正确的项目，
2. 为什么当导航回/ menu / categories /，前端发送/ menu / categories / categories /而不是/ menu / categories / - 作为'id'变量时，它会发送'categories'字样...（此问题发生在当用户从浏览器中的链接末尾删除/ 1时

任何帮助将不胜感激。谢谢！

Answer 1

要使用组件中的更新，您应该订阅数据，而不是通过快照访问它。而不是this.route.snapshot.data['productsByCategory']使用this.route.data.subscribe((data) => { this.productsByCategory = data['productsByCategory'];})。修复第二个问题从路由器配置中删除path: ''配置。我认为这就足够了，因为path: '**'配置已经处理了这种情况。