Angular 2.0 и ng-style

Я создаю компонент Angular 2.0, и я хочу динамически его управлять (используя ng-style). После быстрого просмотра Angular 2 документов я пробовал это:

<div class="theme-preview" ng-style="{'font-size': fontSize}">
  {{fontSize}}
</div>

И увидел, что размер фактически напечатан внутри div, но не повлиял на стиль. fontSize является одним из свойств связывания свойств компонента, то есть компонент получает его от своего родителя следующим образом:

<my-component [font-size]="size" />

Внутри компонента у меня есть:

@Component({
  selector: 'XXX',
  properties: ['fontSize']
})

Я что-то пропустил?

Ответы

Ответ 1

Update

Люди до сих пор доходят до этого ответа, поэтому я обновил plnkr до бета-версии. До сих пор две вещи изменились

  • NgStyle больше не требуется явно добавлять в свойство директивы. Это часть общих директив, добавленных по умолчанию.
  • Синтаксис изменился, теперь это должен быть случай верблюда.

Пример

@Component({
  selector : 'my-cmp',
  template : `
    <div class="theme-preview" [ngStyle]="{'font-size': fontSize+'px'}">
   {{fontSize}}
  </div>`
})
class MyCmp {
  @Input('font-size') fontSize;
}

@Component({ 
  selector: 'my-app',
  directives: [MyCmp],
  template: `
    <my-cmp [font-size]="100"></my-cmp>
  `
})

Смотрите plnkr (обновлено до бета-версии)

Ответ 2

Для конкретного стиля вы также можете использовать это:

<div class="theme-preview" [style.font-size]="fontSize+'px'">

Ответ 3

Что-то вроде этого фактически работает с последней версией angular прямо сейчас 4, синтаксис фактически изменился, обратите внимание на [ngStyle]

.color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
}

<div class="color-box" [ngStyle]="{'background-color': your.model.object.color_code}"></div>