角4 - @HostBindingは、cssクラスをホスト要素にバインドしますが、正しくはレンダリングしません。

Question

ProductListComponentを作成し、子コンポーネントのProductRowComponentにアクセスしました。コードは、私がスタイル

.selectedItem { 
    background-color: blue; 
    color: white; 
} 

を定義し

ProductListComponent

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 
import { Product } from '../product'; 
    @Component({ 
     selector: 'products-list', 
     template: ` 
      <product-row *ngFor="let myProduct of productList" 
         [product]="myProduct" 
         (click)="clicked(myProduct)" 
         [class.selectedItem] = "isSelected(myProduct)"> 
      </product-row> 
     ` 
    }) 
    export class ProductsListComponent implements OnInit { 
     @Input() productList: Product[]; 
     @Output() onProductSelected: EventEmitter<Product>; 

     constructor() { 
     this.onProductSelected = new EventEmitter(); 
     } 

     clicked(product: Product): void { 
     this.currentProduct = product; 
     this.onProductSelected.emit(product); 
     } 

     isSelected(product: Product): boolean { 
     if(!product || !this.currentProduct) { 
      return false; 
     } 
     return this.currentProduct.sku === product.sku; 
     } 
    } 

ProductRowComponent

import { Component, Input, HostBinding } from '@angular/core'; 
import { Product } from '../product'; 

@Component({ 
    selector: 'product-row', 
    template: ` 
    <div class="card"> 
    <div class="card-block"> 
    <h4 class="card-title">{{product.name}}</h4> 
    <p class="card-text"> 
     {{product.price}} 
    </p> 
    </div> 
</div> 
    ` 
}) 
export class ProductRowComponent { 
    @Input() product: Product; 
    @HostBinding('attr.class') cssClass = "selectedItem"; 
} 

の下にリストされている。しかし、それは選択された製品に右のスタイルを適用されていません。私はブラウザウィンドウをデバッグし、そのスタイルがホスト要素のproduct-rowに適用されていることを確認しました。

**<product-row** ng-reflect-product="[object Object]" **class="selectedItem"**> 
    <div class="card"> 
    <div class="card-block"> 
    <h4 class="card-title">Black Running Shoes</h4> 
    <p class="card-text"> 
     109.99 
    </p> 
    </div> 
</div> 
</product-row> 

私は間違っていますか？

Answer 1

この目的のために、コンポーネントではなく@HostBindingで属性ディレクティブを使用する必要があります。