Компонент Angular 6, применить css к классу, применяемому с привязкой к хосту?

Обычно я использую глобальный файл 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? Могу я? Нужно ли мне?


angular css sass angular-components angular2-hostbinding
person Steve    schedule 17.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, мне нужно использовать :host, правильно?

:host {
  &.card {
    padding: 2rem;
  }
}
person Steve    schedule 17.10.2018
comment
Вы можете это сделать, но, как правило, это не всегда лучшая практика, и по возможности ее следует избегать. Если стили, которые вы хотите применить, являются частью заботы самого этого компонента, я бы посоветовал вам добавить тег оболочки для вашего шаблона. <div class="card">your card header and body tags</div>. Затем вы можете стилизовать его как обычно, без каких-либо уловок и обходных путей. - person Xinan; 17.10.2018