主页 / user-27694593

user p's questions

Martin Hope
user p
Asked: 2024-11-14 22:44:15 +0800 CST
  • 5

我目前正在尝试重新创建 Angular 用于 Angular Material Cards 的逻辑。从功能上讲，它对我来说是可行的，但是当我尝试切换到类选择器而不是 css 选择器时，我的样式没有应用。以下是我的用例的一些代码：

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

卡片.组件.html

<ng-content></ng-content>

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

应用程序.组件.ts

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

确实应用了 app-card 样式，但 card-header、card-content 和 card-footer 未应用。我可以在元素的 DOM 中找到属性，但没有找到类。我的目标是获得与 Angular Material Card 相同的功能，只是使用我自己的样式并作为我自己的组件。

css
Martin Hope
user p
Asked: 2024-11-14 20:50:44 +0800 CST
  • 8

我目前正在尝试为我的应用程序创建一个卡片组件，以用于学习目的。我的目标是获得一个通用的可重复使用的卡片组件。当我不使用 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