如何用属性设置角度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绑定。什么会起作用是这样的：

父视图中的

：

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