스타일에 바인딩 값

스타일에 바인딩 값

클래스(속성 바인딩에 의해 획득됨)의 색상 속성을 바인딩하여 다음을 설정하려고 합니다.background-color나의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 + ";";
    }
}

내 템플릿:

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

이 구성 요소의 용도:

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

제 바인딩이 작동하지 않지만, 예외도 두지 않습니다.

제가 말씀드리면.{{changeBackground()}}템플릿의 어딘가에서 올바른 문자열을 반환합니다.

그런데 왜 스타일 바인딩이 작동하지 않는 겁니까?

또한 내부의 색상 속성의 변화를 어떻게 볼 수 있을까요?Circle수업? 대체물은 무엇입니까?

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

앵귤러 2에서?

문자열에 대한 스타일 바인딩이 작동하지 않는 것으로 나타났습니다.해결책은 스타일의 배경을 묶는 것입니다.

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

현재(2017년 1월 / Angular > 2.0) 다음을 사용하실 수 있습니다.

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

그리고.

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

가장 짧은 방법은 아마도 다음과 같습니다.

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

알파28과 이렇게 잘 어울리게 만들 수 있었습니다.

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;
    }
}

이렇게 부르면서.<circle color='yellow'></circle>

• app.component.html에서 다음을 사용합니다.

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

• App.ts에서 문자열 유형의 변수 선언backcolor:string.

• 변수 설정this.backcolor="red".

이는 각도 11 및 이전 버전에서 정상적으로 작동합니다.

<div [style.backgroundColor]="myBgColor" [style.color]="myColor">Jesus loves you</div>

그리고 controller .ts 파일에서:

myBgColor = '#1A1A1A'
myColor = '#FFFFFF'

해라[attr.style]="changeBackground()"

언급URL : https://stackoverflow.com/questions/29515475/binding-value-to-style