主页 / coding / 问题 / 79188813
Accepted
user p
Asked: 2024-11-14 20:50:44 +0800 CST

如何在 Angular 18 中选择性地使用卡片组件加载样式？

  • 772

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

卡片.组件.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 {
}

卡片.组件.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>

问题在于 card-footer 类出于 UI 原因具有 border-top。有时我想使用此组件但不想使用 card-footer。我不想看到 border-top，但由于 div，它现在当然一直在那里。

到目前为止，我尝试使用@if，并在 AfterContentInit 中使用 ViewChild 的 ContentChildren 检查内容时选择性地加载 div card-footer，但没有成功

angular

1 个回答

  1. Best Answer

    针对您的具体情况，我发现有三种可能的解决方案：

    1. 使用 ViewChild 并检查页脚元素上的内容

    您可以在页脚容器 div 元素上使用ViewChild并检查其内容长度；如果长度大于 0 则显示页脚，否则隐藏页脚。

    export class CardComponent implements AfterViewInit {

  public emptyFooter: boolean;

  @ViewChild('footer') public footer: ElementRef<HTMLDivElement>;

  constructor(private changeDetectorRef: ChangeDetectorRef) {
  }

  public ngAfterViewInit(): void {
    this.emptyFooter = this.footer.nativeElement.children.length === 0;
    this.changeDetectorRef.detectChanges();
  }
}

    在视图初始化之后需要检查内容，以防止在设置之后ExpressionChangedAfterItHasBeenCheckedError调用。detectChanges()this.emptyFooter

    这是一个可运行的 StackBlitz，其中包含一个简化的工作示例。

    您可以根据您的需要改进示例并使用它。

    2. 您也可以仅使用 css 来完成此操作：

    您还可以考虑用元素替换div用于投影内容的元素ng-container，并仅使用投影的元素解决页眉、内容和页脚的样式问题。这样，当没有页脚时，首先就不会渲染任何内容（因此也不需要隐藏任何内容）。

    请参阅此处另一个带有纯 css 示例的运行 StackBlitz。

    3.还可以使用ContentChild；再例如：

    您还可以使用ContentChild，看起来最后一个例子更符合您的尝试，但不确定这是否是获得您想要的结果的最佳解决方案。

    在此示例中，实际上也无需对卡片组件内的内容子项执行任何操作。我获取它们并将它们输出到控制台以进行演示，但实际上我并没有以任何方式使用它们；隐藏页脚再次完全由指令添加的 css 类解决。

    在此处查看带有 ContentChild 示例的第三个 StackBlitz。

    为使此示例正常运行而犯下的主要错误是选择器需要包装在 中[]。因此：

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

相关问题