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 */
  ]
})

然后我收到以下错误：

我找到了几个有这个问题的帖子，大多数人都说使用主应用程序模块中的组件，它应该可以用于所有其他模块。这显然不适合我。我还尝试将一个exports属性添加到主应用程序模块并导出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中声明的组件仍然可以工作。去图。

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

1 个答案: