使用@ jsonforms / angular-material

问题描述

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

示例应用程序不使用路由，但是其设置非常复杂，例如在应用程序模块定义中使用构造函数。我也尝试按照几乎相同的方法来满足自己的需求，因此最终结果如下：

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

Google表示这是由于循环依赖性。但是，我检查了一下自己，模块托管的组件很简单：

@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;
    }

我做错了什么？我可以做些什么来简化它，还是可以参考另一个示例项目？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）