Angular2 CSSクラスをコンポーネント変数値に設定

Question

私は簡単なことをしようとしていますが、私のニーズを満たす例は見つけられません。私はajaxスピナーをレンダリングするシンプルなコンポーネントを持っていますが、コンシューマがクラスまたは複数のクラス（スペースで区切られた）をコンポーネントへの入力パラメータとして渡し、コンポーネントビューテンプレートでクラスをimgタグに追加できるようにしたいテンプレート。ここに私のコンポーネントである：ここでは

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'loading', 
    templateUrl: 'loading.html', 
    inputs: ['imgClass'] 

}) 

export class LoadingComponent { 
    @Input() imgClass: string; 
} 

は、ビューテンプレートである：ここで

<img [ngClass]="{ imgClass : true}" src="./Content/img/loading_spinner.gif" /> 

は、私はそれを使用する方法である：

<div class="row" *ngIf="isLoading"> 
     <div class="col-xs-4"></div> 
     <div class="col-xs-4 no-pad"><loading [imgClass]="center-block"></loading></div> 
     <div class="col-xs-4"></div> 
    </div> 

は、だから私は、センターブロックを追加することにしたいです読み込みコンポーネントを介してimgタグに渡しますが、動作していないようです。

アプリは、マークアップはこれですロード：

それはそれはクラスとしてリテラル「imgClass」を追加していますimgClass変数の値を取得していません。

Answer 1

変更ビューテンプレート：

<img class="{{imgClass}}" src="./Content/img/loading_spinner.gif" /> 

これは、あなたのニーズのためのより良いフィットします。

Answer 2

だけ

<img [ngClass]="imgClass" 

ngClass文字列[]、オブジェクトをサポートし、パラメータとして文字列

class="{{...}}" 

は、しばらく前に、モバイルSafare上の問題を引き起こしたが、私はこれがで修正されました覚えているからポリフィル。私は私のクラス名の前後に単一引用符を持っていませんでしそれを使用したとき、私はこのソリューションをしようとすると