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

【问题标题】：Angular2 Set CSS Class To Component Variable ValueAngular2将CSS类设置为组件变量值
【发布时间】：2017-01-25 20:43:04
【问题描述】：

我正在尝试做一些听起来很简单的事情，但我没有找到任何满足我需求的示例。我有一个呈现 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”添加为类。

【问题讨论】：

尝试使用 [class]="imgClass"

标签： angular angular2-template

【解决方案1】：

更改视图模板：

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

这更适合您的需求。

【讨论】：

当我尝试这个解决方案时，我得到
好的，我对您的解决方案实施的问题是当我使用它时，我的班级名称周围没有单引号。我改为：及其工作。谢谢！

【解决方案2】：

只是

<img [ngClass]="imgClass"

ngClass支持object、string[]、string作为参数

class="{{...}}"

前段时间在移动安全上引起了问题，但据我所知，这已在 polyfill 中得到修复。

【讨论】：