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>组件。在实际代码中，有很多属性，维护两个position组件完全同步将是一个维护问题。

除了弄乱CSS <the-footer>值之外，有没有办法告诉angular根据footerPosition属性的值重新定位while (!webControl.IsDocumentReady) { Thread.Sleep(100); }组件？

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>组件的时间。

根据父属性

1 个答案: