Angular2 - 无法绑定到“formGroup”，因为它不是“form”的已知属性

Question

我知道other 有关该主题的问题，但我似乎遗漏了有关导入 FormsModule 和 ReactiveFormsModule 的一些内容。

我有一个带有动态主体的模态组件。这个想法是拥有一个可重用的模态库，其中包含从 URL 加载或从预加载模板填充的动态主体。

（为简洁起见）

modal-dialog.html

<!--modal-content-->

<!--modal-header-->

<modal-body [BodyTemplateUrl]="BodyTemplateUrl" [BodyTemplate]="BodyTemplate"></modal-body>

<!--modal-footer-->

modal-body.html（使用angular2-component-outlet的动态模板）

  <ng-container *componentOutlet="template; context: context"></ng-container>

modal-body.component.ts

@Input() BodyTemplateUrl: string;
@Input() BodyTemplate: string;

constructor() { }

ngAfterViewInit() {
  // this.template = require(this.BodyTemplateUrl);  // 'module undefined' when doing this

  this.template = this.BodyTemplate;  // can't bind to formGroup error.. 
}

licences.html

<modal-dialog [HeaderText]="modalHeaderText"
          [ActionButtonText]="actionButtonText"
          [OkButtonText]="okButtonText"
          [CloseButtonText]="closeButtonText"
          [BodyTemplateUrl]="bodyTemplateUrl"
          [Body]="bodyTemplate">
</modal-dialog> 

我试图让“modal-body”组件加载“BodyTemplateUrl”， 但出现“模块未定义”错误。 Q1 - 此 URL 是相对于模态对话框组件还是许可证 组件？

现在我在“licences.component”中加载正文模板，并通过输入将其传递给对话框组件。现在的问题是“licences.add.html”（正文模板） 无法识别 [formGroup] 指令，出现错误“无法绑定到 'formGroup' 因为它不是“形式”的已知属性。

ReactiveFormsModule 和 FormsModules 在 SharedModule 中导入（和导出），其中 模态模块存在。然后将 SharedModule 导入到“licences.module”中 用于访问模态组件。

Answer 1

ReactiveFormsModule 和 FormsModules 在模态模块所在的 SharedModule 中导入（和导出）。

不会像这样工作。模块不会从父母那里继承任何东西。模块应该是自包含的。所以ModalModule 不会从SharedModule 获取表单。

要解决此问题，您可能认为可以将SharedModule 导入ModalModule（以获取表单），但这很有效，因为您将有一个循环依赖并导致它中断。所以你只需要将表单模块直接导入ModalModule，如果你想将它包含在SharedModule中。