0

我正在尝试通过从https://github.com/eclipsesource/jsonforms-angular-seed.git运行示例应用程序来使用https://www.npmjs.com/package/@jsonforms/angular-material

示例应用程序不使用路由，但它的设置非常复杂，例如在应用程序模块定义中使用构造函数。我也尝试遵循几乎相同的方法来满足我的需求，所以结果是这样的：

import {APP_INITIALIZER, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { NgxPaginationModule } from 'ngx-pagination';
import { SharedModule } from '../../shared/shared.module';
import {DynamicFormComponent, SchemaEditorDialog} from './dynamic-form.component';
import { DynamicFormData } from './dynamic-form.data';
import {JsonFormsAngularService, JsonFormsModule} from '@jsonforms/angular';
import {Actions, UISchemaElement, setLocale} from '@jsonforms/core';
import { forkJoin } from 'rxjs';
import { parsePhoneNumber } from 'libphonenumber-js';
import { resolveRefs } from 'json-refs';
import AJV from 'ajv';
import { initialState } from './store';
import data from './data';
import {JsonFormsAngularMaterialModule} from '@jsonforms/angular-material';
import {BrowserModule} from '@angular/platform-browser';

export const routes = [
  { path: '', component: DynamicFormComponent, pathMatch: 'full' }
];

export const loadCore = (jsonformsService: JsonFormsAngularService, http: HttpClient): () => Promise<void> => {
  return () => {
    const ajv = new AJV({
      schemaId: 'auto',
      allErrors: true,
      jsonPointers: true,
      errorDataPath: 'property'
    });
    ajv.addFormat('time', '^([0-1][0-9]|2[0-3]):[0-5][0-9]$');
    ajv.addFormat('tel', maybePhoneNumber => {
      try {
        parsePhoneNumber(maybePhoneNumber, 'DE');
        return true;
      } catch (_) {
        return false;
      }
    });

    return forkJoin({
      uischema: http.get('./assets/uischema.json'),
      schema: http.get('./assets/schema.json')
    }).toPromise().then(result => {
      const { schema, uischema } = result;
      return resolveRefs(schema)
          .then(
              (res: any) => {
                jsonformsService.updateCore(
                    Actions.init(
                        data,
                        res.resolved,
                        uischema as UISchemaElement,
                        ajv as any
                    )
                );
              }

          );
    });
  };
};

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule,
    InMemoryWebApiModule.forRoot(DynamicFormData, {delay: 500}),
    NgxPaginationModule,
    SharedModule,
    JsonFormsModule,
    JsonFormsAngularMaterialModule,
    BrowserModule
  ],
  declarations: [
    DynamicFormComponent,
    SchemaEditorDialog
  ],
  schemas: [],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadCore,
      deps: [JsonFormsAngularService, HttpClient],
      multi: true
    }
  ]
})

export class DynamicFormModule {
  constructor(jsonformsService: JsonFormsAngularService) {
    jsonformsService.init(initialState.jsonforms);
    jsonformsService.updateLocale(setLocale('de-DE'));
  }
}

然后我在 Javascript 控制台中得到了这个：

ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'DynamicFormModule' before initialization
ReferenceError: Cannot access 'DynamicFormModule' before initialization

谷歌说这是因为循环依赖。但是，我检查了自己，模块托管的组件很简单：

@Component({
  selector: 'app-configurations',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.scss'],
  encapsulation: ViewEncapsulation.None,
  providers: [ DynamicFormService ]
})
export class DynamicFormComponent implements OnInit {
    public users: FilledFormListItemDto[];
    public searchText: string;
    public page: any;
    public settings: Settings;

    schema: any;
    uiSchema: any;
    data: any;

    constructor(private appSettings: AppSettings,
                private dialog: MatDialog){
        this.settings = this.appSettings.settings;
    }

我做错了什么？有什么我可以做的让它更简单，或者可能是另一个示例项目来参考？

4

0 回答 0