基於父屬性更改角度分量的位置

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>組件。