Привязать файл внешнего компонента HTML к данным json со страницы вызова в Angular
с Angular 14 я использую сетку ag для отображения строк данных на странице моего основного компонента. Я выбираю строку, нажимаю кнопку и хочу вызвать HTML-файл вспомогательного компонента в отдельном каталоге, содержащем собственный машинописный файл. Я могу собирать данные строки как данные JSON, но я хочу вставить вспомогательный компонент HTML на свою главную страницу.
Q: Как я могу связать вспомогательный компонент 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>
Ответы 1
вы можете просто передать свойство класса MyObject-grid-main.ts, для которого сначала задано значение null, в качестве ввода MyObject-grid-auxiliary, а затем проверить вспомогательный компонент с помощью 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:\n${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 с вашими данными.
я добавил пример
Мне нужно оставаться на главной странице. Ваше предложение позволит это сделать? не могли бы вы предоставить фрагмент кода для него? Я еще не очень хорошо разбираюсь в angular :\