Angular父组件与多子组件内容投影实现疑问

1. 组件类定义 #

首先在card-list-layout组件的TS文件里声明type输入属性，限定可选值：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'card-list-layout',
  templateUrl: './card-list-layout.component.html',
  styleUrls: ['./card-list-layout.component.css']
})
export class CardListLayoutComponent {
  @Input() type: 'card' | 'list' = 'card';
}

2. 模板中的内容投影 #

在组件模板里用<ng-content>投影所有<card>子组件，同时根据type切换外层容器的布局类：

<!-- 根据type绑定对应的布局类 -->
<div [class]="`layout-${type}`">
  <!-- 仅投影传入的<card>标签，确保精准性 -->
  <ng-content select="card"></ng-content>
</div>

3. 编写布局样式 #

在组件CSS文件里定义两种布局的样式：

/* 卡片模式：自适应网格布局 */
.layout-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
  padding: 1rem;
}

/* 列表模式：垂直弹性布局 */
.layout-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
}

/* 可选：统一列表模式下卡片的样式 */
.layout-list card {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

使用方式 #

直接按你原本的写法在父组件中传入<card>子组件，通过[type]控制布局：

<card-list-layout [type]="type">
  <card>
    Card 1
  </card>
  
  <card>
    Card 2
  </card>
</card-list-layout>

原理说明：<ng-content select="card">会精准捕获父组件中嵌套在<card-list-layout>内的所有<card>元素，将它们插入到组件模板的对应位置，再通过绑定的CSS类实现两种布局的切换。

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