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变量值，而是添加了文字＆＃39; imgClass＆＃39;作为班级。

Answer 1

更改视图模板：

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

这更符合您的需求。

Answer 2

只需

<img [ngClass]="imgClass"

ngClass支持object，string []和string作为参数

class="{{...}}" 

前一段时间引起了移动Safare的问题，但据我记得，这已在polyfill中得到修复。