如何設置具有屬性的角度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屬性和角度綁定。什麼工作是這樣的：在父視圖

：

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