Angular2 Установить класс CSS для компонента Значение переменной

Question

Я пытаюсь сделать что-то, что звучит просто, но я не нахожу примеров, которые отвечают моим потребностям. У меня есть простой компонент, который отображает ajax spinner, но я хочу разрешить пользователям передавать класс или несколько классов (разделенных пробелом) в качестве входных параметров для компонента и иметь шаблон представления компонентов, добавляющий классы в тег 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 некоторое время назад, но от того, что я помню, это было зафиксировано в polyfill.