如何在Angular 10自定义组件中将垂直对齐方式应用于子组件？

问题描述

我正在创建自己的Angular组件（类似于“卡片”），其中自定义组件将类似于：

<app-my-card>
   <app-my-card-header>
   </app-my-card-header>
   <app-my-card-body>
   </app-my-card-body>
   <app-my-card-footer>
   </app-my-card-footer>
<app-my-card>

app-my-card组件将具有'height'和'width'属性。 如何提供样式，以使“ app-my-card-footer”组件始终在“ app-my-card”显示区域的底部垂直对齐？

解决方法

解决了！

在顶层组件中，使用多个过滤的“ ng-content”标签，例如：

<div class="my-card-content smart-stack-layout vertical space-between">
    <div style="height: 50px; width: 100%">
      <ng-content select="app-my-card-header"></ng-content>
    </div>
    <div style="height: 100%; width: 100%">
      <ng-content select="app-my-card-body"></ng-content>
    </div>
    <div style="height: auto; width: 100%">
      <ng-content select="app-my-card-footer"></ng-content>
    </div>
  </div>