在重用的父组件中加载不同的子组件

Question

我正在尝试在我的第一个Angular（4）项目中执行以下操作：

<parent-component-A>
   <child-component-X>//some template, css, logic etc...</child-component-X>
</parent-component-A>

<parent-component-A>
   <child-component-Y>//another template, css, logic etc...</child-component-Y>
</parent-component-A>

<parent-component-C>
   <child-component-Z>//a third different template, css, logic etc...</child-component-Z>
</parent-component-C>
...

我现在的项目结构是：

                             ------------
                             |   app    |
                             ------------
                           /              \
                          /                \
                    ------------      ------------
                    |The parent|      |   other  |
                    ------------      ------------
                  /          |
                 /           |
                /            |
               /             |
              /              |
        ------------   ------------
        | Child-1  |   | Child-2  | ... 3 and so on
        ------------   ------------

我不确定如何实现这个想法。在app模板中，主要的一个，我想引用“父”的选择器，字面上是上面的html代码但是因为父组件的子元素必须在其指令中加载我看不出我怎么能改变要从那里加载哪个子视图，所以我的猜测是它必须在app组件中指定，其中使用“the-parent”组件。如何判断Angular在父视图中加载哪个子组件？我可以从模板中做到吗？我要改变我的项目结构吗？