Angular14中如何绑定辅助组件到主组件并传递JSON数据

1. 项目目录结构 #

src/
├── app/
│   ├── main/
│   │   ├── main.component.ts
│   │   ├── main.component.html
│   │   └── main.component.css
│   ├── auxiliary/
│   │   ├── auxiliary.component.ts
│   │   ├── auxiliary.component.html
│   │   └── auxiliary.component.css
│   ├── app.module.ts
│   └── app.component.ts

2. 辅助组件实现（接收并展示选中行数据） #

先实现独立的辅助组件，通过输入属性接收主组件传递的选中行JSON数据：

auxiliary.component.ts #

import { Component, Input } from '@angular/core';

// 定义数据结构（可选，用于类型约束）
export interface RowData {
  id: number;
  name: string;
  // 补充实际业务需要的字段
}

@Component({
  selector: 'app-auxiliary',
  templateUrl: './auxiliary.component.html',
  styleUrls: ['./auxiliary.component.css']
})
export class AuxiliaryComponent {
  // 定义输入属性，接收主组件传递的选中行数据
  @Input() selectedRowData!: RowData;
}

auxiliary.component.html #

<div class="aux-box">
  <h4>选中行详情</h4>
  <p>ID：{{ selectedRowData.id }}</p>
  <p>名称：{{ selectedRowData.name }}</p>
  <!-- 根据实际字段扩展展示内容 -->
</div>

3. 主组件实现（AG-Grid展示+选中行联动） #

主组件负责AG-Grid渲染、监听行选中事件，通过按钮控制辅助组件的显示并传递数据：

先安装AG-Grid依赖 #

npm install ag-grid-angular ag-grid-community

main.component.ts #

import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { RowData } from '../auxiliary/auxiliary.component';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  // AG-Grid配置
  gridOptions: GridOptions = {
    columnDefs: [
      { headerName: 'ID', field: 'id' },
      { headerName: '名称', field: 'name' },
      // 补充其他列定义
    ],
    rowSelection: 'single', // 启用单选模式
    onRowSelected: (event) => {
      // 存储选中行数据
      this.selectedRow = event.data as RowData;
    }
  };

  // 模拟数据源
  rowData: RowData[] = [
    { id: 1, name: '测试数据行1' },
    { id: 2, name: '测试数据行2' },
    { id: 3, name: '测试数据行3' }
  ];

  selectedRow: RowData | null = null;
  showAuxiliary = false; // 控制辅助组件显示状态

  // 按钮点击事件：触发辅助组件显示
  openAuxiliary() {
    if (this.selectedRow) {
      this.showAuxiliary = true;
    } else {
      alert('请先选中一行数据');
    }
  }
}

main.component.html #

<div class="main-box">
  <!-- AG-Grid容器 -->
  <ag-grid-angular
    style="width: 100%; height: 400px;"
    class="ag-theme-alpine"
    [gridOptions]="gridOptions"
    [rowData]="rowData">
  </ag-grid-angular>

  <!-- 触发按钮 -->
  <button (click)="openAuxiliary()" [disabled]="!selectedRow">
    查看选中行详情
  </button>

  <!-- 辅助组件：通过*ngIf控制显示，绑定选中行数据 -->
  <app-auxiliary 
    *ngIf="showAuxiliary && selectedRow"
    [selectedRowData]="selectedRow">
  </app-auxiliary>
</div>

4. 模块配置（app.module.ts） #

在根模块中声明两个组件，并导入AG-Grid模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';

import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import { AuxiliaryComponent } from './auxiliary/auxiliary.component';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    AuxiliaryComponent
  ],
  imports: [
    BrowserModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

核心逻辑说明 #

• 辅助组件通过@Input()装饰器接收主组件传递的数据，实现父子组件数据绑定。
• 主组件利用*ngIf指令控制辅助组件的渲染时机，确保只有选中行存在时才展示辅助组件。
• AG-Grid通过rowSelection: 'single'启用单选，onRowSelected事件监听行选中状态并存储数据。

内容的提问来源于stack exchange，提问作者fifamaniac04