完成一个商品列表展示页面； 包含事件传参（跳转到对应商品页面）、列表渲染、事件绑定等方式。

完成一个商品列表展示页面通常涉及以下几个步骤：

1. **HTML结构**:
创建一个HTML模板，包括每个商品项的基本信息，比如商品名称、图片、价格等。例如：

   <ul class="product-list">
     <li *ngFor="let product of products" (click)="goToProductPage(product)">
       <img [src]="product.image" alt="{{product.name}}">
       <h3>{{product.name}}</h3>
       <p>价格: {{product.price}}</p>
     </li>
   </ul>

2. **数据绑定**: 使用Angular的`*ngFor`指令遍历商品数组`products`。

3. **事件绑定**:
在每个商品列表项上绑定了`(click)`事件，当用户点击商品时，会触发`goToProductPage`函数，这个函数接收商品对象作为参数，如：

   goToProductPage(product: Product) {
     // 跳转到对应的商品详情页，并传递产品ID或者其他需要的数据
     this.router.navigate(['/product', product.id]);
   }

4. **路由设置**:
如果应用中使用了路由服务（如Angular Router），你需要配置一条路径将点击商品链接到相应的详细页。

5. **样式处理**:
根据设计需求，添加CSS样式，美化列表布局和单个商品项的外观。