使用 Angular 指令时如何使用类选择器

Question

我目前正在尝试重新创建 Angular 用于 Angular Material 卡的逻辑。就功能而言，它对我有用，但是当我尝试切换到类选择器而不是 css 选择器时，我的样式没有被应用。这是我的用例的一些代码：

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.ts

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

应用卡样式确实得到应用，而不是卡头、卡内容和卡页脚。我可以在元素的 DOM 中找到属性，但没有类。我的目标是获得与 Angular Material Card 相同的功能，只是使用我自己的样式和我自己的组件。

Answer 1

我尝试写了一个例子，它成功了：StackBlitz

我的猜测是它不起作用的原因是：您正在使用独立组件，但该指令不是独立指令。

因此，该指令并未实际执行。

<div card-header>Header Content</div>

将保持原样。