关于angular api调用和组件通信

Question

我有一个组件product.component.ts，其中我具有通过api调用获得的多个产品的所有数据

@Component({
    selector: 'app-pinfo',
    templateUrl: './product.component.html',
    styleUrls: ['./product.component.css']
  })

然后，当我单击单个产品时，在此组件上显示所有商品之后，导航到detailproductinfo组件，并将产品ID作为导航参数传递给我，我深知我将如何处理以下产品的详细数据

1. Api调用getproductinfobyid（id）或

2. 传递产品组件中的数据，因为我已经在产品组件中包含了与产品相关的数据

我很想知道哪种方法可以从上方增强性能，而哪些方法可以从下方提高角度

1. 使用服务或

在组件之间传递数据 使用http
的

2. api调用

Answer 1

尽管有多种处理方法，但这完全取决于以下方面：

1. Products API是否返回每个产品的完整详细信息。或者他们是否只是根据您想要在“产品列表”页面上显示的内容返回相关详细信息。
2. 是否通过商品API来控制您，并确定应该返回什么数据。
3. 每种产品的数据模型具有的字段数。

请牢记所有这些，如果每个产品的字段数量很多，那么我认为通过products API返回所有产品的详细信息是不合适的。每个产品的详细信息都应由products/:id API返回，该API将ProductId作为参数。

因此，在这种情况下，从ActivatedRoute获取ID，然后调用/products/:id API以获取产品详细信息会更有意义。

另一方面，如果产品的数据模型不是那么大，则可以通过产品API返回产品的完整详细信息。

因此，在这种情况下，可以通过SharedService传递所选产品数据。