产品列表组件
为了创建一个列出产品的组件，我们将再次使用 Angular CLI generate 命令。这次我们将使用它来创建一个组件，如下所示：
ng g component components/ProductList --module products.module
我们希望将products.module模块传递给它（使用--module），以便它成为主产品组件的子组件，并且它们可以共享数据。
在组件的 TypeScript 文件中，ProductList我们将：
导入Input指令以便从父组件到子组件共享数据
导入Product我们第一步制作的接口
在声明内部ProductListComponent并实例化我们从父产品组件共享 墨西哥电报号码数据库 的产品数据：@Input() product: Product。
所有这些看起来是这样的：
产品组件是将产品数据发送到产品列表组件的父组件。与产品列表组件一样，我们需要导入Observable和Product接口。我们还需要导入ProductsService，即我们之前创建的调用 Netlify 函数的服务getProducts。
我们在课堂内部完成所有的工作：
分配products给我们制作的接口 Product 的可观察数组
在构造函数中我们使用数据注入来使用该服务，ProductsService并将其分配给productsService
当生命周期ngOnInit被调用时（在 Angular 初始化了指令的所有数据绑定属性之后），我们将其分配给服务内部products返回的内容getProductsproductsService
当products在类开头声明时，ProductsComponent我使用TypeScript 非空断言运算符。这是我之前提到的解决方法，可以代替在产品列表组件中用默认数据初始化。我不推荐这样做，但我认为这是关闭 TypeScript 严格模式的一个很好的替代方案。!