Angular调整TestCard组件布局：实现Mockup指定排列

问题描述 #

我正在开发一个Angular仪表盘，组件通过environment.ts传递键值数据展示，当前功能正常。现在需要调整TestCard组件的排列方式，不再横向并排，改为Mockup指定的布局样式。我是Angular新手，不确定能否通过ng-container调整div定位实现需求。

相关代码 #

environment.ts 配置片段 #

col: 'col-6',
title: 'test',
info: 'testinfo',
content : [
    {
        title: 'testvaluediv1',
        key: 'testvalue',
        pipe: {
            name: 'number',
            value: '1.0-0'
        },
        postFix: {
            text: 'test',
        },
        color: 'info',
        size: 'large'
    },
    {
        title: 'testvaluediv2',
        key: 'testvalue',
        pipe: {
            name: 'number',
            value: '1.0-0'
        },
        postFix: {
            text: 'test',
        },
        color: 'info',
        size: 'large'
    },
    // 以此类推直到test5
}
]

父组件调用TestCard的HTML代码 #

<ng-container *ngFor="let config of config?.content" >
    <test-card *ngIf="!config.id" 
        [config]="config"
        [entity]="boxes[config?.key]"
    ></test-card>
</ng-container>

TestCard组件HTML代码 #

<div>
    <span *ngIf="config?.preFix?.icon" [class]="'pr-2 icon '+ config?.preFix?.icon"></span>
    <span>{{config?.preFix?.text}} {{entity?.value | cut}} {{config?.postFix?.text}}</span>
    <span *ngIf="config?.postFix?.icon" [class]="'pl-2 icon '+ config?.postFix?.icon"></span>
</div>
<div>
    <span>{{config?.title}}</span>
</div>

当前效果 #

TestCard组件为横向并排展示，不符合目标布局要求。

调整方案 #

ng-container仅作为逻辑容器使用，不会渲染成DOM元素，无法直接控制布局。布局需要通过CSS（Flexbox/Grid）或UI框架的布局类实现，以下是具体步骤：

1. 给父组件添加布局容器 #

在ng-container外层包裹一个div容器，通过CSS定义布局规则：

<div class="test-card-container">
    <ng-container *ngFor="let config of config?.content" >
        <test-card *ngIf="!config.id" 
            [config]="config"
            [entity]="boxes[config?.key]"
        ></test-card>
    </ng-container>
</div>

在父组件CSS中添加样式：

/* 示例1：垂直堆叠布局 */
.test-card-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 卡片间间距 */
}

/* 示例2：两行三列的Grid布局（根据Mockup需求调整） */
/* .test-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1rem;
} */

2. 优化TestCard组件内部结构 #

给TestCard组件添加外层容器，统一内部元素样式：

<div class="test-card-wrapper">
    <div class="test-card-value">
        <span *ngIf="config?.preFix?.icon" [class]="'pr-2 icon '+ config?.preFix?.icon"></span>
        <span>{{config?.preFix?.text}} {{entity?.value | cut}} {{config?.postFix?.text}}</span>
        <span *ngIf="config?.postFix?.icon" [class]="'pl-2 icon '+ config?.postFix?.icon"></span>
    </div>
    <div class="test-card-title">
        <span>{{config?.title}}</span>
    </div>
</div>

在TestCard组件CSS中添加样式：

.test-card-wrapper {
    padding: 1.2rem;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.test-card-value {
    font-size: 1.8rem;
    color: #17a2b8; /* 对应color: info的配置 */
    margin-bottom: 0.5rem;
}
.test-card-title {
    font-size: 0.9rem;
    color: #6c757d;
}

3. 结合配置动态适配布局 #

如果需要利用environment.ts中的col配置控制容器宽度，可以将类动态绑定到父容器：

<div [class]="config?.col">
    <ng-container *ngFor="let item of config?.content" >
        <test-card *ngIf="!item.id" 
            [config]="item"
            [entity]="boxes[item?.key]"
        ></test-card>
    </ng-container>
</div>

若项目使用Bootstrap，col-6这类栅格类会自动控制容器宽度，进而影响卡片排列逻辑。

关键说明 #

• ng-container仅负责循环、条件判断等逻辑处理，不参与DOM布局，布局必须依赖实际DOM元素和CSS规则。
• 优先使用CSS Flexbox/Grid实现自定义布局，灵活性最高；若项目引入了UI框架（如Bootstrap、Angular Material），也可直接使用框架提供的布局组件或类。

内容的提问来源于stack exchange，提问作者du7ri