将外部 HTML 组件文件绑定到 Angular 中调用页面的 json 数据

Question

使用 Angular 14，我使用 ag 网格在我的主要组件页面中显示数据行。我选择一行，单击一个按钮，然后我想在包含其自己的打字稿文件的单独目录中调用一个辅助组件 HTML 文件。我能够将行数据收集为 JSON 数据，但我想将辅助组件 HTML 插入到我的主页中。

问：如何绑定辅助 html 组件以出现在我的主 html 中？

目录结构

ClientApp
   src
     app
        MyObject
            MyObject-grid-main
                 MyObject-grid-main.css
                 MyObject-grid-main.html
                 MyObject-grid-main.ts
            MyObject-grid-auxiliary
                 MyObject-grid-auxiliary.css
                 MyObject-grid-auxiliary.html
                 MyObject-grid-auxiliary.ts

---

MyObject-grid-main.html

<button (click)="getSelectedRowData()">Get More Info</button>
<ag-grid-angular #agGrid id="ag-grid"></ag-grid/angular>
...
<div>
<!-- Here I want to insert MyObject-grid-auxiliary.html after I bind the JSON data -->
</div>

---

MyObject-grid-main.ts

@ViewChild('agGrid' grid!: GridApi;
getSelectedRowData()
{
    const selectedData = this.grid.getSelectedRows();
    const jsonDataString = JSON.stringify(selectedData);
    alert(`Selected Data:\n${jsonDataString}`); // display in popup

   // Here is where I want to bind the JSON data to the MyObject-grid-auxiliary.html
   // and have it appear in the place holder above

}

---

MyObject-grid-auxiliary.html

<h2 class="title">{{data.title}}</h2>
...
<span>{{data.remarks}}</span>
...
<tr *ngFor="let pos of data.locations">
                <td>
                  <span>{{pos.position.lat}}</span>
                </td>
                <td>
                  <span>{{pos.position.long}}</span>
                </td>
                <td>
                  <span>{{pos.lastReportedOnDateTime}}</span>
                </td>
              </tr>

Answer 1

您可以简单地将首先设置的MyObject-grid-main.ts 类属性作为MyObject-grid-auxiliary 输入传递给null，然后在设置数据时使用ngIf 签入辅助组件，然后显示您的内容。

在getSelectedRowData 设置类属性和内容应该会显示在辅助组件中

更新示例：

在您的 MyObject-grid-main.ts 添加一个名为的新属性

auxiliarData = null;

在MyObject-grid-main.html 中添加您需要的辅助组件。

<myobject-grid-auxiliary [data]="auxiliarData"></myobject-grid-auxiliary>

在函数getSelectedRowData中添加更新逻辑，示例

const selectedData = this.grid.getSelectedRows();
const jsonDataString = JSON.stringify(selectedData);
alert(`Selected Data:
${jsonDataString}`);
...
this.auxiliarData = selectedData;

在MyObjectGridAuxiliary.ts

export class MyObjectGridAuxiliary {
    @Input() data = '';
}

在MyObject-grid-auxiliary.html

<div *ngIf="data"> put your html here ... </div>

因此，每当定义 MyObjectGridAuxiliary.data 时，组件都会向您显示包含数据的 html。