angular form.io form-b​​uilder 自定义组件获取参考

Question

我正在使用 ANGULAR 10 进行开发

我使用 form.io form-b​​uilder 来渲染组件

我添加自定义组件，drow grid (ag-grid) 根据此链接add custom Components with Angular Elements

每一个想法都很好

我多次拖放表格以绘制多个表格。
我附上一张照片，说明在将操作拖放到表单中后表单的样子

问题。

当 form.io 渲染绘制 ag-grid 的自定义组件时，我需要从组件定义 (json) 中获取连接字符串和 sql 语句。

在渲染时，我不知道如何从我的自定义组件中获取此信息。没有这些信息，我不知道生成列名和行的内容。

这是我的项目

builder 组件包含 formio 标签

aggrid 组件是我自定义的显示 ag 网格组件

formio.ts

从'@angular/core'导入{注入器}； 导入 { FormioCustomComponentInfo, registerCustomFormioComponent } from 'angular-formio'; 从 './aggrid-wrapper.component' 导入 { AggridWrapperComponent };

export function minimalEditForm() {
  return {
    components: [
      { key: 'type', type: 'hidden' },

      
      {
        weight: 10,
        type: 'textarea',
        input: true,
        key: 'key',
        label: 'sql statement',
        tooltip: 'please enter your sql statement',
      }
    ],
  };
}
const COMPONENT_OPTIONS: FormioCustomComponentInfo = {
  type: 'sqlaggrid',
  selector: 'sql-grid',
  editForm: minimalEditForm,
  title: 'sql-grid',
  group: 'basic',
  icon: 'fa fa-star',
};



export function registerAgGridComponent(injector: Injector) {
  registerCustomFormioComponent(COMPONENT_OPTIONS, AggridWrapperComponent, injector);

}

agrid-wrapper.component.html

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-alpine"
   [gridOptions]="gridOptions">
</ag-grid-angular>

AggridWrapperComponent

    import { Component, EventEmitter, Input, ElementRef, Output ,ViewChild} from '@angular/core';
    import { FormioCustomComponent } from 'angular-formio';
    
    
    import { Grid, GridOptions } from "ag-grid";
    
    @Component({
      selector: 'app-aggrid-wrapper',
      templateUrl: './aggrid-wrapper.component.html',
      styleUrls: ['./aggrid-wrapper.component.css']
    })
    
    export class AggridWrapperComponent implements FormioCustomComponent<number>  {
      @Input()
      value: number;  //number is missing (null)
    
      @ViewChild('aggrid') input; 
    
      @Output()
      valueChange = new EventEmitter<number>();
    
      @Input()
      disabled: boolean;
    
      private _value: number;
    
    
    
     
      public gridOptions: GridOptions;
    
      constructor(private elRef: ElementRef) {
        this.gridOptions = <GridOptions>{
          columnDefs: this.createColumnsDefs(),
          onGridReady: (params) => {
            this.gridOptions.api.setRowData(this.executeStatement());
          }
        }
      }
     
      createColumnsDefs() {
    
        /* return the grid columns */

       /*If I could get the field definition containing the SQL statement   then I could return the columns of the grid */
        return ???;
      }
    executeStatement(){
    
    /* get the grid rows  */
/*If I could get the field definition containing the SQL statement   then I could execute the statement and back the rows  */
    return ??? */
    
    }
    
    }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,Injector } from '@angular/core';
import { RouterModule } from '@angular/router';
import {AppConfig} from './formio-config';
//import { AppRoutingModule } from './app-routing.module'
import { FormioModule } from 'angular-formio';
import { AppComponent } from './app.component';
import { BuilderComponent } from './builder/builder.component';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { RatingWrapperComponent } from './rating-wrapper/rating-wrapper.component';
import { registerAgGridComponent} from './aggrid-wrapper/formio'
import { AggridWrapperComponent } from './aggrid-wrapper/aggrid-wrapper.component';
import { AgGridModule } from 'ag-grid-angular';


import { HttpClientModule } from '@angular/common/http';

@NgModule({


  declarations: [
    AppComponent,
    BuilderComponent,
    AggridWrapperComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    FormioModule,
    BrowserAnimationsModule,
    NgbModule,
    AgGridModule.withComponents([])
  ],
  exports: [RouterModule],
  providers: [ ],
  bootstrap: [AppComponent]

})
export class AppModule{

  constructor(injector: Injector) {
    registerAgGridComponent(injector)
  }
}

我缺少对组件定义的引用

有什么想法吗？

Answer 1

您是否尝试过通过键获取对象？

component = form.getComponent('keyName')

Answer 2

问题是：

1. 表单对象来自哪里。
2. 我多次拖放同一个组件，我不知道在组件 (AggridWrapperComponent) 内我是哪个实例。

Answer 3

嘿，我可以通过创建一个主题并在应用组件的 OnChange 处推送数据，然后在我想要的任何地方检索数据来实现。