Question

我有一个组件，该组件遍历所有具有唯一ID的区域数组。当您单击按钮时，它会打开一个对话框，其中包含一个iframe，该iframe侦听事件侦听器并以JSON形式检索数据，然后通过邮寄将其发送到ASP.NET CORE API中的INSERT方法。

我现在也在尝试发送该区域的ID，现在我只将其作为参数传递给openDialog函数。

planner.component.html

<div *ngFor="let area of areas">
 <div class="area-container">
  {{area.areaId}}
  <button (click)="openDialog(area.areaId)" type="button" class="btn btn-primary btn-rounded">+</button>
 </div>
</div>

planner.component.ts

随即会打开带有iframe的对话框，现在仅记录该区域的ID。

 openDialog(id: number) {
    let dialogref = this.dialog.open(IframeComponent, {
      width: '120vh'
    });
    console.log({areaId:id}) // like this {areaId: 20}
    this.plannerService.getData(this.id);
    dialogref.afterClosed().subscribe(result => {
      console.log(`Dialog closed: ${result}`);
      this.dialogresult = result;
    })
  }

在服务中，我有一个eventListener，它存储来自iframe的数据并将其作为JSON发送到我的ASP.NET Core API。

您可以在此处看到我正在尝试发送ID，但是我不知道如何从planner.component中获取值，这使其变得不确定。

.planner.service.ts

getData(id: number) {
    window.addEventListener("message", (e) => {
      let data = JSON.parse(e.data)
      console.log(data);
      console.log({areaId: id})
      this.createResource(data, id).subscribe(data => this.resources.push(data));
      }, false);
  }

iframe中的数据作为JSON

{id: 282970, title: "page 1", description: "", thumbnail: "https://site/image/resourc…umbnail?guid=a0b67c13-ead4-49e0-a576-b4c8be1491b2", url: "https://site/l/show.html#PZWQz", …}
description: ""
guid: "a0b67c13-ead4-49e0-a576-b4c8be1491b2"
id: 282970
thumbnail: "https://site/image/resourcethumbnail?guid=a0b67c13-ead4-49e0-a576-b4c8be1491b2"
title: "page 1"
url: "https://site/l/show.html#PZWQz"

{areaId: undefined}

问题是如何将planner.component（现在仅被记录）中的areaId的值传递给我的服务方法，以便我可以将其传递给我的API？

Answer 1

在组件中，您可以注入planner服务并调用其方法

假设您的服务名称为PlannerService

您的组件构造器将是这样的：

constructor(private plannerService: PlannerService) {

}

然后在您的方法中可以执行以下操作：

openDialog(id: number) {
    let dialogref = this.dialog.open(IframeComponent, {
      width: '120vh'
    });
    console.log({areaId:id}) // like this {areaId: 20}
    this.plannerService.getData(id) <-- here id is the parameter you want to send
    dialogref.afterClosed().subscribe(result => {
      console.log(`Dialog closed: ${result}`);
      this.dialogresult = result;
    })
  }

将值从ngFor内部的元素传递给Service

1 个答案: