Зависимость от ModalController в модуле Angular / Ionic вызывает «Не удается разрешить все параметры» для службы - PullRequest
Новая
       24

Зависимость от ModalController в модуле Angular / Ionic вызывает «Не удается разрешить все параметры» для службы

0 голосов
/ 28 мая 2018

Я создаю модуль динамической формы для Ionic 4.7.0 и Angular 5.0.3.Модуль создает DynamicFormComponent, но внутри также использует DynamicFormService.Эта услуга не должна быть доступна за пределами модуля.Служба зависит от Ionic ModalController для регистрации модальных всплывающих окон.Эта зависимость вызывает следующую ошибку:

Can't resolve all parameters for DynamicFormComponent(?, [object Object]).

Если я удаляю зависимость ModalController из моего сервиса, ошибка исчезает, но мне нужен ModalController для создания всплывающих окон в различных компонентахмодуль.

Как я могу это исправить?

Это мой dynamic-form.module.ts, который включен в импорт моего AppModule: 

import { NgModule, ErrorHandler } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule, IonicErrorHandler } from 'ionic-angular';
import { ReactiveFormsModule }          from '@angular/forms';

import { StringFieldComponent } from './fields/stringfield.component';
import { SelectFieldComponent } from './fields/selectfield.component';
import { NumberFieldComponent } from './fields/numberfield.component';

import { DynamicFormService } from './dynamic-form.service';
import { DynamicFormComponent } from './dynamic-form.component';
import { DynamicFieldDirective } from './dynamic-field.directive';

@NgModule({
  declarations: [
    StringFieldComponent,
    SelectFieldComponent,
    NumberFieldComponent,
    DynamicFieldDirective,
    DynamicFormComponent,
  ],
  providers: [
    DynamicFormService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ],
  imports: [
    CommonModule,
    IonicModule,
    ReactiveFormsModule,
  ],
  exports: [
    DynamicFormComponent,
  ],
  entryComponents: [
    StringFieldComponent,
    SelectFieldComponent,
    NumberFieldComponent,
  ]
})
export class DynamicFormModule {
}

Этосокращенная версия dynamic-form.component.ts, которая, я думаю, содержит все соответствующие части. 

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder }   from '@angular/forms';
import { FormConfig } from './models/form-config.interface';
import { DynamicFormService } from './dynamic-form.service';


@Component({
  selector: 'dynamic-form',
  templateUrl: './dynamic-form.component.html',
})
export class DynamicFormComponent implements OnInit{

  @Input() datasetSchema: object;
  @Input() formName: string;
  @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();

  payLoad: string;
  formGroup: FormGroup;
  config: FormConfig;

  constructor(
    public dfs: DynamicFormService,
    private fb: FormBuilder,
  ) {
  }

  ngOnInit() {
    this.config = this.dfs.mapJSONSchema(this.datasetSchema)[this.formName];
    this.formGroup = this.createFormGroup();
  }

  onSubmit() {
    if(this.valid){
      this.payLoad = JSON.stringify(this.value);
      this.valueChanged.emit(this);
      console.log("Form value", this.value);
    }
  }
  //...... Some stuff left out for brevity's sake
}

Вот начало DynamicFormService: 

import { Injectable } from '@angular/core';
import { Validators } from '@angular/forms';
import 'rxjs/add/operator/map';
import { ModalController } from 'ionic-angular';
import { FormConfig } from './models/form-config.interface';
import { FieldConfig } from './models/field-config.interface';
import { DynamicSubFormComponent } from './dynamic-subform.component';
import { IntegerValidator } from './fields/validators';


@Injectable()
export class DynamicFormService {
  private modals = {};

  constructor(
    public modalCtrl: ModalController
  ) {
    console.log("Started dynamic form service");
  }
  //.... Again stuff left out for brevity's sake.
}

И, чтобы быть в безопасности,это мой app.module.ts 

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { EnviMo } from './app.component';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { DynamicFormModule } from '../dynamic-form/dynamic-form.module';

import { PageService } from '../providers/page-service/page-service';

import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';

const config: SocketIoConfig = { url: 'http://127.0.0.1:8080', options: {} };

@NgModule({
  declarations: [
    EnviMo,
    HomePage,
    ListPage,
  ],
  imports: [
    BrowserModule,
    SocketIoModule.forRoot(config),
    DynamicFormModule,
    IonicModule.forRoot(EnviMo)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    EnviMo,
    HomePage,
    ListPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    PageService,
  ]
})
export class AppModule {
  constructor() {
  }
}

1 Ответ

0 голосов
/ 29 мая 2018

Ответ - это только частичный ответ, потому что он требует небольшого рефакторинга.Очевидно, что использование modalcontroller в сервисе на самом деле плохо, так как сервис не является компонентом и, следовательно, не является частью DOM или иерархии компонентов, или как он называется официально (пожалуйста, исправьте меня).ModalController, с другой стороны, зависит от иерархии компонентов и, в частности, от приложения, чтобы иметь возможность добавлять модальное значение в корневой компонент.Ионная магия позаботится об этом во время начальной загрузки, если я правильно понимаю.Но так как DynamicFormService в моем DynamicFormModule создается до того, как произойдет какая-либо загрузка, служба не может быть создана.Если он находится не в подмодуле, а непосредственно в приложении, сначала происходит загрузка, а затем - создание службы.Так что в этом случае никаких проблем.

НО: компоненты (DynamicFormComponent и другие) в моем модуле создаются только после начальной загрузки.Таким образом, они МОГУТ использовать ModalController.Таким образом, решение состояло в том, чтобы переместить вызовы modalCtrl.create к компонентам вместо того, чтобы помещать их в службу, и вводить ModalController в эти компоненты, а не в службу.

...