Angular 2.0 und ng-Stil

Baue ich eine Eckige 2.0-Komponente aus, und ich will es kontrollieren, Stil dynamisch (über ng-style). Nach einem kurzen Blick auf Eckig 2 - docs habe ich versucht, dieses:

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

Und sah, dass die Größe ist tatsächlich gedruckt im div aber nicht beeinträchtigt Stil. fontSize ist einer der Komponente die Eigenschaft "Bindungen", d.h. die Komponente bekommt es von seinen Eltern wie diese:

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

Während in der Komponente die ich habe:

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

Bin ich hier etwas fehlt?

InformationsquelleAutor der Frage Yaniv Efraim | 2015-08-30

  1. 46

    Update

    Menschen noch erreichen, dass diese Antwort, so dass ich aktualisiert die plnkr zu beta.1. Zwei Dinge haben sich geändert, so weit

    • NgStyle ist nicht mehr notwendig, explizit Hinzugefügt werden, die in der Richtlinie Eigenschaft. Es ist Teil der gemeinsamen Richtlinien, die standardmäßig Hinzugefügt werden.
    • Die syntax hat sich geändert, jetzt muss es sein-camel-case.

    Beispiel

    @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>
  `
})

    Sehen diese plnkr (auf beta Aktualisiert.1)

    InformationsquelleAutor der Antwort Eric Martinez

  2. 11

    Für spezielle Stil, können Sie auch dieses verwenden:

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

    InformationsquelleAutor der Antwort nir

  3. 0

    Etwas wie dieses tatsächlich funktioniert auf der aktuellsten version von angular direkt jetzt 4, die syntax, die tatsächlich geändert wurden, bitte beachten Sie die [ngStyle]

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

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

    InformationsquelleAutor der Antwort d1jhoni1b

Schreibe einen Kommentar