时间戳

首页 > 解决方案 > Angular - 在组件之间传递数据

c# - Angular - 在组件之间传递数据

问题描述

我正在开发一个 Web 应用程序，我将 Angular 用于前端，将 .Net 用于后端，我对这两种技术都很陌生。我有一个存储在 SQL Server 中的数据库，我使用 C# 类获取数据，并使用一些控制器将其传递给前端。我有一个 api.server.ts 文件，它从控制器调用函数，这些函数用于我的应用程序中的所有组件。我有一个组件，我在其中获取一系列产品（数据库中的所有产品）并在 html 中显示它们（使用 ngfor），以及每个产品的按钮。我想要做的是当我按下按钮将我重定向到另一个组件（这是一个新页面）并向我显示有关该特定产品的详细信息时。

这是我在前端控制器中使用该功能的地方（我认为显示该功能没有用，因为它工作正常）：

  getProducts() {
    return this.http.get(this.baseUrl + '/Product/GetAll', { headers: this.header });
  }

这是我展示产品的 html 部分。“Vezi produs”按钮将我重定向到另一个组件，我想在其中查看某个特定产品的产品信息。我尝试使用插值来获取产品 ID 并将其返回到 api.service.ts（从第一个组件设置来自 api.service.ts 的产品变量的值），然后我想在另一个组件中显示它组件（使用this.api.product），但似乎我不能使用插值。

  <div *ngFor="let product of products;">
        <div class="card" style="width: 15rem; height: 25rem; position:relative; margin-left:40px;">
          <img src={{product.picture}} class="card-img-top" alt={{product.name}} style="width:15rem; height:13rem;">
          <div class="card-body">
            <h5 class="card-title"><b>{{product.name}}</b></h5>
            <p class="card-text">{{product.description}}.</p>
            <table>
              <tr>
                <td>
                  <a href="#" class="btn btn-primary" id="veziprodus" (onclick)="getProduct({{product.Id}});" [routerLinkActive]="['link-active']" [routerLink]='["/view-product"]'>Vezi produs</a>
                </td>
                <td>
                  <p style="position:absolute; bottom:10px; right:10px;">
                    <b> {{product.price}} lei </b>
                  </p>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>

此外，我也遇到了“兄弟”组件的问题。我真的不知道我的想法是否好，是否真的可以从第一个组件设置 api.product 值，然后使用相同的变量在第二个组件中显示它。

标签： c#asp.net.netangulartypescript

解决方案

一种方法是使用 Angular 中的路由器支持。您可以设置应用程序，使您的产品列表组件位于一个页面上（假设是根 / ），然后您在另一条路线上有一个产品详细信息组件（即 /product）。当用户单击您列表中的按钮时，您使用路由器服务导航到 /product 页面，将产品标识符作为查询参数传递。产品详细信息将进行另一个后端调用并呈现产品详细信息。

这个和相关概念在角度“英雄之旅”教程中得到了很好的描述：https ://angular.io/tutorial

推荐阅读