Angular 6组件，将css应用于应用主机绑定的类？答案

【问题标题】：Angular 6 component, apply css to class applied with hostbinding?Angular 6组件，将css应用于应用主机绑定的类？
【发布时间】：2019-03-22 07:30:36
【问题描述】：

我通常在我的应用程序中使用全局 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 应用于组件的类？我可以吗？我应该吗？

【问题讨论】：

标签： css angular sass angular-components angular2-hostbinding

【解决方案1】：

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

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

【讨论】：

您可以这样做，但一般来说，这并不总是最佳实践，应尽可能避免。如果您要应用的样式是该组件本身关注的一部分，我建议您为模板添加一个包装器标签。 <div class="card">your card header and body tags</div>。然后，您可以正常设置样式，而无需任何技巧或变通方法。