Angular指令中类选择器使用问题：自定义卡片样式不生效

我正在复刻Angular Material Cards的逻辑，功能层面已实现，但切换为类选择器后，card-header、card-content、card-footer的样式未生效。DOM中可看到元素上的属性，但未生成对应的类。app-card的样式可正常应用，目标是实现与Angular Material Card一致的功能并自定义样式。

代码示例如下：

card.component.ts #

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

@Directive({
  selector: `[card-header], [cardHeader]`,
  host: { class: 'card-header' },
})
export class CardHeader {}

@Directive({
  selector: `[card-content], [cardContent]`,
  host: { class: 'card-content' },
})
export class CardContent {}

@Directive({
  selector: `[card-footer], [cardFooter]`,
  host: { class: 'card-footer' },
})
export class CardFooter {}

@Component({
  selector: 'app-card',
  standalone: true,
  templateUrl: './card.component.html',
  styleUrl: './card.component.scss',
  host: {
    class: 'app-card',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class CardComponent {}

card.component.html #

<ng-content></ng-content>

card.component.scss #

app-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  background-color: black;
  color: white;
  padding-bottom: 14px;
  padding-top: 14px;
}

.card-header {
  display: flex;
  font-size: 14px;
  padding: 0px 16px;
  margin-bottom: 1rem;
}

.card-content {
  display: block;
  padding: 0 16px;
}

.card-footer {
  display: block;
  padding: 12px 16px 0px;
  margin-top: 1rem;
  border-top: 1px solid #444;
}

app.component模板 #

<app-card>
  <div card-header>Header Content</div>
  <div card-content>Main Content</div>
  <div card-footer>Footer Content</div>
</app-card>

问题核心是Angular独立组件要求所有用到的指令必须显式导入，你定义的CardHeader、CardContent、CardFooter指令未在使用它们的AppComponent中注册，导致Angular无法识别这些指令，也就不会为元素添加host配置的类。

有两种解决方式：

方式1：在AppComponent中直接导入指令 #

修改AppComponent的代码，将三个指令和CardComponent一起加入imports数组：

import { Component } from '@angular/core';
import { CardComponent, CardHeader, CardContent, CardFooter } from './card/card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardComponent, CardHeader, CardContent, CardFooter],
  template: `
    <app-card>
      <div card-header>Header Content</div>
      <div card-content>Main Content</div>
      <div card-footer>Footer Content</div>
    </app-card>
  `,
})
export class AppComponent {}

方式2：在CardComponent中导出指令（推荐） #

修改CardComponent的配置，将三个指令加入exports数组，这样只要导入CardComponent就能自动使用这些指令：

@Component({
  selector: 'app-card',
  standalone: true,
  templateUrl: './card.component.html',
  styleUrl: './card.component.scss',
  host: {
    class: 'app-card',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  exports: [CardHeader, CardContent, CardFooter] // 新增导出配置
})
export class CardComponent {}

此时AppComponent只需导入CardComponent即可：

import { Component } from '@angular/core';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardComponent],
  template: `
    <app-card>
      <div card-header>Header Content</div>
      <div card-content>Main Content</div>
      <div card-footer>Footer Content</div>
    </app-card>
  `,
})
export class AppComponent {}

完成上述修改后，Angular会正确识别指令并为元素添加对应的card-header、card-content、card-footer类，样式即可正常生效。

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