Angular 基于父属性更改角度组件的位置

我有一个角度2组件，代表一个简单的控件。它有一个正文和一个页脚。控件的用户仅与

组件交互，该组件将许多属性传递给

和

选择器：“我的控件”，
模板：`
`

我希望能够向

添加一个属性，将页脚放在

上方而不是下方。我可以这样做：

selector: 'my-control',
template: `
    <the-footer
       *ngIf="footerPosition === 'top'"
       [footerProp1]="footerProp1"
       [footerProp2]="footerProp2">
    <the-body
       [bodyProp1]="bodyProp1"
       [bodyProp2]="bodyProp2">
    </the-body>
    <the-footer
        *ngIf="footerPosition === 'bottom'"  
        [footerProp1]="footerProp1"
        [footerProp2]="footerProp2">
    </the-footer>`

选择器：“我的控件”，
模板：`
`

但我不想在顶部重复整个

组件。在实际代码中，它有很多属性，保持两个

组件完全同步是一个维护问题

除了处理CSS

位置

值之外，是否有一种方法可以告诉angular根据

footerPosition

属性的值重新定位

组件？

您可以创建一个

组件来呈现

组件，并尝试以下结构：

   <my-control>

   <Footer-Container *ngIf="footerPosition === top">
   </Footer-Container>

   <the-body>
   </the-body>

   <Footer-Container *ngIf="footerPosition === bottom">
   </Footer-Container>

   </my-control>

---

希望此解决方法可以节省您在多个位置维护渲染组件的时间。

不幸的是，这并不能真正解决问题。我以前可能没有说清楚，但很多属性都是通过父级传递到页脚的（我更新了原始帖子以使其更清楚）。因此，您将不得不将所有这些相同的属性从父级传递到

，这是相同的问题。

   <my-control>

   <Footer-Container *ngIf="footerPosition === top">
   </Footer-Container>

   <the-body>
   </the-body>

   <Footer-Container *ngIf="footerPosition === bottom">
   </Footer-Container>

   </my-control>