Question

我通常在应用程序中使用全局SCSS文件，但是今天我想制作一些范围仅限于我的组件的scss。

我已经通过@HostBinding的{{1}}在组件上设置了一个类。

我可以在组件的内部中设置样式，例如class.card，但是如何将替代应用于此组件的caard-body类？

换句话说，我在页面上有几张卡片。我的风格只想应用到这张卡上，以使其看起来与众不同。所以我想应用

这样的css

card

所以只有这张卡是紫色的。我想将此CSS作为该组件的一部分，因此无论我在哪里使用它，它都会自动成为紫罗兰色卡。（实际上，我不仅想做一件简单的事情，但您会明白的）

我的组件TS：

.card { background-color: violet; }

我的组件SCSS：

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

@Component({
  selector: 'app-reviews',
  templateUrl: './reviews.component.html',
  styleUrls: ['./reviews.component.scss']
})
export class ReviewsComponent {
  @HostBinding('class.card')
  true;

  @Input()
  review;

  constructor() {}
}

我的组件HTML：

.card-header {
  border: 0;
  color: #cf0989;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 2rem;
  font-weight: normal;
}

.card-body {
   ...
}

我的CSS中用于<div class="card-header">Testimonials</div> <div class="card-body"> <div class="review-image"> <img class="rounded-circle" alt="{{review.acf.article_author.post_title}}" src="{{review.acf.article_author.acf.image}}"> </div> <div class="review-content"> <p class="review"> <span [innerHTML]="review.content.rendered"></span> </p> <p class="reviewer-name">{{review.acf.article_author.post_title}}</p> </div> </div>和.card-body的选择器工作正常，但是我无法设置.card-header的样式。例如，添加此内容不会执行任何操作：

.card

如何在组件的SCSS文件中创建SCSS选择器，这些选择器也适用于通过.card { background-color: violet: }应用于组件的类？我可以吗？我应该吗？

Answer 1

看起来我需要使用:host，对吗？

:host {
  &.card {
    padding: 2rem;
  }
}

Angular 6组件，将CSS应用于通过主机绑定应用的类？

1 个答案: