声明的X类型部分-解决方案不适用于动态组件

Question

我在主应用程序模块中使用了一个组件。它基本上是生成动态组件，我正在使用的各种模型。我还构建了一个用于处理表单向导的安装模块，并且我希望在安装模块的一部分中使用相同的组件。所有操作都正常，但是当我尝试使用导入主应用程序模块的共享组件时，我得到了以下错误：

​

​

动态组件的代码位于这篇文章的最下面。

因此，我将代码导入我的安装模块，如下所示：

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    SetupModalPageComponent,
    SetupModalComponent,

    DynamicFormComponent,
    DynamicComponent, /* IMPORT HERE */

    /* Modals */
    SetupDeviceComponent,
    SetupEulaComponent,
    SetupProfileComponent
  ],
  providers: [
    SetupModalService
  ],
  exports: [
    SetupModalPageComponent,
    SetupModalComponent,

    DynamicFormComponent,
    DynamicComponent /* IMPORT HERE */
  ]
})

然后，我得到以下错误：

​

​

我已经找到了关于这个问题的几个帖子，而且大多数人都说使用主应用程序模块中的组件，这将使所有其他模块都可以使用它。显然这对我不管用。我还试图将导出属性添加到主应用程序模块中，并导出对我也不起作用的DynamicComponent。

任何想法都将不胜感激。谢谢。

动态组件：

import {
  Component,
  Input,
  ViewContainerRef,
  ViewChild,
  ReflectiveInjector,
  ComponentFactoryResolver
} from '@angular/core';

/*** Available Components ***/
/* Setup Components */
import { SetupDeviceComponent } from '../../modules/setup/components/dynamic-forms/setup-device/setup-device.component';
import { SetupEulaComponent } from '../../modules/setup/components/dynamic-forms/setup-eula/setup-eula.component';
import { SetupProfileComponent } from '../../modules/setup/components/dynamic-forms/setup-profile/setup-profile.component';
/* Modal Components */
import { AlertModal } from '../site/modals/modals/alert/alert.modal';
import { ChangePasswordModal } from '../site/modals/modals/change-password/change-password.modal';
import { ConfirmModal } from '../site/modals/modals/confirm/confirm.modal';

@Component({
  selector: 'dynamic-component',
  entryComponents: [
    /* Setup Components */
    SetupDeviceComponent,
    SetupEulaComponent,
    SetupProfileComponent,

    /* Modal Components */
    AlertModal,
    ChangePasswordModal,
    ConfirmModal
  ],
  template: `<div #dynamicComponentContainer></div>`,
})

export class DynamicComponent {
  currentComponent: any = null;

  @ViewChild('dynamicComponentContainer', {
    read: ViewContainerRef
  }) dynamicComponentContainer: ViewContainerRef;

  @Input() set componentData(data: {component: any, inputs: any }) {
    if (!data) {
      return;
    }

    let inputProviders = Object.keys(data.inputs).map((inputName) => {
      return {
        provide: inputName,
        useValue: data.inputs[inputName]
      };
    });

    let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
    let injector = ReflectiveInjector.fromResolvedProviders(
      resolvedInputs,
      this.dynamicComponentContainer.parentInjector
    );
    let factory = this.resolver.resolveComponentFactory(data.component);
    let component = factory.create(injector);

    this.dynamicComponentContainer.insert(component.hostView);

    if (this.currentComponent) {
      this.currentComponent.destroy();
    }

    this.currentComponent = component;
  }

  constructor(private resolver: ComponentFactoryResolver) {}
}

Answer 1

通过从AppModule中删除导入声明并将导入声明和导出保留在SetupModalModule中，我对此进行了修正。现在，即使依赖项在另一个模块中声明，在AppModule中声明的组件仍然工作。去想一想。