meaning - angularjs tutorial pdf




शैली के लिए कोणीय 2.0 बाध्यकारी मूल्य (4)

मैं अपने डिव का background-color सेट करने के लिए अपनी क्लास से एक कलर प्रॉपर्टी (फीचर बाइंडिंग द्वारा अधिग्रहीत) को बांधने की कोशिश कर रहा हूँ।

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()}} डाल देता, तो सही स्ट्रिंग वापस करता। तो स्टाइल बाइंडिंग काम क्यों नहीं कर रही है?

यह भी सोचने के लिए आते हैं, मैं सर्कल वर्ग के अंदर रंग संपत्ति में परिवर्तन कैसे देखूंगा? के लिए प्रतिस्थापन क्या है

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

कोणीय 2.0 में?


अब तक (जनवरी 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>

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

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

[attr.style]="changeBackground()"


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

    [ngStyle]="{'background':backcolor}"
    
  • में app.ts स्ट्रिंग प्रकार backcolor:string चर घोषित backcolor:string

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





angular