शैली के लिए बाध्यकारी मूल्य

Question

मैं स्थापित करने के लिए मेरी कक्षा (विशेषता बाध्यकारी द्वारा अधिग्रहीत) से एक रंग संपत्ति बाध्य करने के लिए कोशिश कर रहा हूँ 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 में?

Answer 1

एक बंधन के लिए शैली के बंधन को चालू नहीं करता है। इसका समाधान शैली की पृष्ठभूमि को बांधना होगा।

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

Comments

आपने alligator.io/angular/style-binding-ngstyle-angular <div class="circle" [style.background]="'color'">

— Saad Benbouzid

स्पष्टता के लिए: colorइस मामले में आपके घटक पर एक संपत्ति होती है जिसमें वह मूल्य होता है जिसका आप उपयोग करना चाहते हैं। यदि आप ऐसे उद्धरणों का उपयोग कर रहे हैं जो वह मूल्य है जिसका आप उपयोग करना चाहते हैं। colorएक वैध सीएसएस रंग नहीं है। यह कुछ इस तरह की आवश्यकता होगी [style.background] = "'#f3f3f3'"।

— सीन

Answer 2

अब तक (जनवरी 2017 / कोणीय> २.०) आप निम्नलिखित का उपयोग कर सकते हैं:

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>

Answer 3

मैं इसे इस तरह से अल्फा 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>

Answer 4

• अपने app.component.html उपयोग में:

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

• में app.ts स्ट्रिंग प्रकार के चर घोषित backcolor:string।

• चर सेट करें this.backcolor="red"।

Answer 5

प्रयत्न [attr.style]="changeBackground()"