angular - 如何使用属性设置 Angular 4 组件的样式？

Question

我有一个组件，我想将某些数据传递给 ngFor 中的子组件通过属性。基于属性，我想最终设置这些子组件的样式。

代码

<强> testimonials.component.html - (Parent component)

<ng-template ngFor let-person="$implicit" [ngForOf]="peopleAsPreviousCurrentAndNextTriplets" let-i=index let-last=last>
    <app-card
           [prevCard]      ="last ? person.previous : null"
           [currentCard]   ="last ? person.current : null"
           [nextCard]      ="last ? person.next : null"
    ></app-card>
</ng-template>

<强> card.component.ts - (Child component)

import {Component, Input, ViewChild} from '@angular/core';
import {Person} from '../testimonials/person';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent {
  @Input() decrement:     Number;
  @Input() defaultDiff:   Number;
  @Input() currentCard:   Person;
  @Input() prevCard:      Person;
  @Input() nextCard:      Person;
  @ViewChild('card')      card;

  constructor() { }
}

我想要样式 <app-card>与 [currentCard]属性。

<强> child.component.sass

:host {
  &[currentCard] {
    .testimonials__card-container {
      background-color: black;
    }
  }
}

不确定为什么上面的样式没有被应用。

请帮忙。

谢谢

编辑

这是可视化我的固定卡片:

Answer 1

不要混淆 html 属性和 Angular 绑定(bind)。可行的方法是这样的:

在父 View 中:

   <app-card [class.currentcard]= "last"
               [prevCard]      ="last ? person.previous : null"
               [currentCard]   ="last ? person.current : null"
               [nextCard]      ="last ? person.next : null">
    </app-card>

并在子级的样式表中:

:host(.currentcard) {
   background-color: black;
}