Angular 6 组件，将 css 应用到使用主机绑定应用的类？

Question

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

我已经通过

@HostBinding

（

class.card

）在组件上设置了一个类。

我可以在我的组件内部设置项目的样式，例如

caard-body

，但是如何将覆盖应用于此组件的

card

类？

换句话说，我的页面上有几张卡片。我有一些样式只想应用于这张卡片，以使其看起来有所不同。所以我想应用CSS，例如

.card { background-color: violet; }

所以只有这张牌是紫罗兰色的。我想让这个 css 成为这个组件的一部分，所以无论我在哪里使用它，它都会自动成为一张紫罗兰卡。 （实际上我想要的不仅仅是一件简单的事情，但你明白了）

我的组件 TS：

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() {}
}

我的组件SCSS：

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

.card-body {
   ...
}

我的组件 HTML：

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

CSS 中

.card-body

和

.card-header

的选择器工作正常，但我无法设置此

.card

的样式。例如，添加此内容不会执行任何操作：

.card { background-color: violet: }

如何在组件的 SCSS 文件中创建 SCSS 选择器，该选择器也适用于通过

@HostBinding

应用于组件的类？我可以吗？我应该吗？

Answer 1

看起来我需要使用

:host

，对吗？

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

Answer 2

在此处添加新答案以添加更多内容。

是的，答案是使用

:host

。正如 @Xinan 指出的那样，单独使用

:host

并不被认为是最佳实践（如果组件的视图封装被关闭，选择器将不再匹配任何内容）。

解决方案是将其与现有选择器结合起来 - 在本例中是您已将“HostBound”绑定到组件的类。像这样（基本上是你的答案，但在一行）：

.card:host {
    padding: 2rem;
}

事实上，通过这种方法，我们可以进一步简化，删除

@HostBinding

并简单地将

:host

与组件的选择器一起使用，如下所示：

app-reviews:host {
    padding: 2rem;
}