Angular2 将 CSS 类设置为组件变量值

Question

我正在尝试做一些听起来很简单的事情，但我没有找到满足我需要的任何示例。我有一个呈现 ajax 微调器的简单组件，但我想允许消费者将一个类或多个类(用空格分隔)作为输入参数传递给组件，并让组件 View 模板将类添加到 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;
}

这是 View 模板:

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

所以我想通过加载组件将中心 block 添加到 img 标签，但它似乎不起作用。

当应用加载标记时:

它没有获取 imgClass 变量值，而是将文字“imgClass”添加为类。

Answer 1

更改 View 模板:

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

这更符合您的需求。