formularios - Valor de unión angular 2.0 al estilo

router events angular 6

Question

Estoy tratando de vincular una propiedad de color de mi clase (adquirida por el enlace de atributo) para establecer el background-color de background-color de mi div.

import {Component, Template} from ''angular2/angular2'';

@Component({
  selector: ''circle'',
  bind:{
    "color":"color"
  }
})
@Template({
  url: System.baseURL + "/components/circle/template.html",
})
export class Circle {
    constructor(){

    }

    changeBackground():string{
        return "background-color:" + this.color + ";";
    }
}

Mi plantilla:

<style>
    .circle{
        width:50px;
        height: 50px;
        background-color: lightgreen;
        border-radius: 25px;
    }
</style>
<div class="circle" [style]="changeBackground()">
    <content></content>
</div>

El uso de este componente:

<circle color="teal"></circle>

Mi enlace no funciona, pero tampoco arroja ninguna excepción. Si colocara {{changeBackground()}} en algún lugar de la plantilla, eso devuelve la cadena correcta. Entonces, ¿por qué el enlace de estilo no funciona?

Ahora que lo pienso, ¿cómo vería los cambios en la propiedad de color dentro de la clase Circle? ¿Cuál es el reemplazo de

$scope.$watch("color", function(a,b,){});

en angular 2.0?

Answer 1

A partir de ahora (enero de 2017 / Angular> 2.0) puede usar lo siguiente:

changeBackground(): any {
    return { ''background-color'': this.color };
}

y

<div class="circle" [ngStyle]="changeBackground()">
    <!-- <content></content> --> <!-- content is now deprecated -->
    <ng-content><ng-content> <!-- Use ng-content instead -->
</div>

El camino más corto es probablemente así:

<div class="circle" [ngStyle]="{ ''background-color'': color }">
    <!-- <content></content> --> <!-- content is now deprecated -->
    <ng-content><ng-content> <!-- Use ng-content instead -->
</div>

Answer 2

Logré hacerlo funcionar con alpha28 así:

import {Component, View} from ''angular2/angular2'';

@Component({
  selector: ''circle'', 
  properties: [''color: color''],
})
@View({
    template: `<style>
    .circle{
        width:50px;
        height: 50px;
        border-radius: 25px;
    }
</style>
<div class="circle" [style.background-color]="changeBackground()">
    <content></content>
</div>
`
})
export class Circle {
    color;

    constructor(){
    }

    changeBackground(): string {
        return this.color;
    }
}

y lo llamó así <circle color=''yellow''></circle>

Answer 3

Pruebe [attr.style]="changeBackground()"

Answer 4

Resulta que la unión del estilo a una cadena no funciona. La solución sería unir el fondo del estilo.

 <div class="circle" [style.background]="color">

Answer 5

• En su app.component.html use:

  [ngStyle]="{''background'':backcolor}"

• En app.ts declaramos variable de tipo de cadena backcolor:string .

• Establezca la variable this.backcolor="red" .