Angular 4在另一个组件中重用一个组件

Question

大家好我正在为我当前的项目使用Angular 4。在深入研究问题之前，我会尝试解释我的问题情景。 我在＆＃34; app＆＃34;中创建了几个组件。文件夹，并创建了＆＃34;功能模块＆＃34;在每个组件内。因此，其中一个组件名为＆＃34; focus＆＃34;。 现在我有一个要求，我需要显示组件的内容＆＃34;焦点＆＃34; 在另一个组件里面＆＃34; iu＆＃34;。

在继续之前，我还要补充说，在这两个组件中都有子组件描述步骤1-7为 根据我的要求。 现在在＆＃34; iu＆＃34;组件的步骤3通过单击图标我想打开一个模态窗口并显示＆＃34;焦点＆＃34;组件（步骤1 - 7）。

这是我在＆＃34; iu＆＃34;的第3步中写的。用于显示＆＃34;焦点＆＃34;屏幕：

    <div class="model fade" *ngIf="showAppCaptureData" tabindex="-1" role="dialog" aria-labelledby="viewAppCaptureData" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="viewAppCaptureData">AppCapture Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="showAppCaptureData=false">
          <span aria-hidden="true">X</span>
        </button>
      </div>
      <div class="modal-body">
        <app-proposal-form></app-proposal-form>
      </div>
    </div>
  </div>
</div>

在我的＆＃34;焦点＆＃34;的功能模块中component我正在导出包含步骤1到7的父元素。

在＆＃34; iu＆＃34;的功能模块中我正在导入那个elt并在＆＃34; iu＆＃34;的步骤3中使用相应的选择器。零件 并定义相应的路线。

你可以在我附上的图片中看到相同的内容。

这是我为在iu组件的第3步中显示焦点组件内容而编写的代码：

问题是当我点击将showAppCaptureData更改为true的图标时，不是在模态窗口中显示内容而是显示内容 在同一个空间。

如下图所示：

我认为问题是因为我的iu-form.component.html文件。

据我所知，仅通过这么多描述和少量代码来理解完整场景可能并不容易。如果我需要发布我为此编写的任何其他代码，请告诉我。

请告知我如何克服此问题并在模态窗口中显示内容。

感谢。