基于父属性更改角度分量的位置

Question

我有一个角度2的组件，它表示一个简单的控件。它有一个身体和一个页脚。该控件的用户只与<my-control>组件交互，该组件将大量属性传递给<the-body>和<the-footer>。

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

我希望能够将属性添加到<my-control>这使上述<the-body>页脚，而不是在它下面。我可以做这样的事情：

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>` 

但我不希望有在顶部再次重复整个<the-footer>组件。在真实代码中有很多属性，保持两个<the-footer>组件完全同步是一个维护问题。

除了用CSS position值搞乱之外，有没有一种方法可以根据footerPosition属性的值告诉角度重新定位<the-footer>组件？

Answer 1

您可以创建一个<Footer-Container>组件将呈现<the-footer>组件，并尝试以下结构：

<my-control> 

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

    <the-body> 
    </the-body> 

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

    </my-control> 

希望这一解决办法将节省您的时间保持在多个位置渲染<the-footer>组件。