如何选择性地使用角度 18 的卡片组件加载样式？

Question

我目前正在尝试为我的应用程序创建一个卡片组件作为学习目的。我的目标是获得通用的可重复使用的卡片组件。当我不使用card-footer指令时，我不希望加载带有class-footer类的div

card.component.ts

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

@Directive({
  selector: 'card-header',
  host: {
    'class': 'card-header',
  },
})
export class CardHeaderDirective {}

@Directive({
  selector: 'card-content',
  host: {
    'class': 'card-content',
  },
})
export class CardContentDirective {}

@Directive({
  selector: 'card-footer',
  host: {
    'class': 'card-footer',
  },
})
export class CardFooterDirective {}

@Component({
  selector: 'app-card',
  standalone: true,
  imports: [],
  templateUrl: './card.component.html',
  styleUrl: './card.component.scss',
})
export class CardComponent {
}

card.component.html

<div class="card">
  <div class="card-header">
    <ng-content select="[card-header]"></ng-content>
  </div>
  <div class="card-content">
    <ng-content select="[card-content]"></ng-content>
  </div>
  <div class="card-footer">
    <ng-content select="[card-footer]"></ng-content>
  </div>
</div>

这是我如何使用它的示例：

<app-card>
  <div card-header>
    <span>Header</span>
  </div>
  <div card-content>
    <span>Some content</span>
  </div>
  <div card-footer>
    <span>Sometimes I'm using this and sometimes not</span>
  </div>
</app-card>

问题在于，由于 UI 原因，类卡页脚有一个边框顶部。有时我想使用这个组件但不想使用卡片页脚。我不想看到顶部边框，但由于 div，它现在总是在那里。

到目前为止，我已经尝试使用 @if 并在使用 AfterContentInit 中的 ViewChild 的 ContentChildren 检查内容时可选地加载 div 卡页脚，但没有运气

Answer 1

不需要动态渲染这个元素，你可以用纯CSS来实现。 在本例中使用

:empty

伪类并应用

display: none

可以在元素为空时隐藏该元素：

.card-footer:empty {
  display: none;
}