javascript कोणीय 2 गतिशील परिवर्तन सीएसएस संपत्ति




angular dart (4)

बस मानक सीएसएस चर का प्रयोग करें:

आपका वैश्विक सीएसएस (उदाहरण: शैलियों.css)

body {
  --my-var: #000
}

आपके घटक के सीएसएस ओ में जो कुछ भी है:

span {
  color: var(--my-var)
}

फिर आप एचटीएमएल तत्व में इनलाइन शैली सेट करके सीधे वैरिएबल के मान को टीएस / जेएस के साथ बदल सकते हैं:

document.querySelector("body").style.cssText = "--my-var: #000";

अन्यथा आप इसके लिए jQuery का उपयोग कर सकते हैं:

$("body").css("--my-var", "#fff");

हम एक कोणीय 2 अनुप्रयोग बना रहे हैं और हम किसी भी तरह से वैश्विक सीएसएस वैरिएबल बनाने में सक्षम होना चाहते हैं (और जब वेरिएबल असाइन किए जाते हैं तो गुणों के मूल्यों को अद्यतन करते हैं)।

हमने थोड़ी देर के लिए पॉलिमर का उपयोग किया था (अब हम कोणीय 2 घटकों पर स्विच कर रहे हैं) और हमने सीएसएस गुणों का उपयोग किया था (पॉलिमर में कुछ पॉलीफिल है) और हमने Polymer.updateStyles() का उपयोग करके शैलियों को अपडेट किया था।

क्या कोई तरीका है कि हम एक समान कार्य कैसे प्राप्त कर सकते हैं?

संपादित करें:

हम सास color: $g-main-color समान कुछ चाहते हैं color: $g-main-color या CSS कस्टम गुणों का color: var(--g-main-color) और जब भी हम संपत्ति के मूल्य को बदलने का निर्णय लेते हैं, उदाहरण के लिए updateVariable('g-main-color', '#112a4f') जैसे कुछ updateVariable('g-main-color', '#112a4f') यह updateVariable('g-main-color', '#112a4f') हर जगह मूल्य को अद्यतन करता है। सब कुछ एक ऐप चल रहा है।

संपादित करें 2:

मैं अपने सीएसएस के विभिन्न हिस्सों (मेजबान, बाल तत्व ...) में कुछ वैश्विक सीएसएस चर का उपयोग करना चाहता हूं और तुरंत मूल्य बदलने में सक्षम हूं - इसलिए यदि मैं अपना रंग परिवर्तनीय बदलता हूं, तो यह ऐप में हर जगह बदल जाता है।

उदाहरण के लिए मैं सैस वाक्यविन्यास का उपयोग करूंगा:

:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }

कोणीय पाइप की तरह कुछ उपयोग करना संभव है? (लेकिन यह माना जाता है कि केवल HTML में काम करता है)

:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }

आपके पास कोई उदाहरण कोड नहीं है लेकिन मुझे लगता है कि आप ऐसा कुछ करना चाहते हैं?

@View({
directives: [NgClass],
styles: [`
    .${TodoModel.COMPLETED}  {
        text-decoration: line-through;
    }
    .${TodoModel.STARTED} {
        color: green;
    }
`],
template: `<div>
                <span [ng-class]="todo.status" >{{todo.title}}</span>
                <button (click)="todo.toggle()" >Toggle status</button>
            </div>`
})

आप एक चर के लिए ng-class असाइन करते हैं जो गतिशील है ( TodoModel नामक मॉडल की एक संपत्ति जिसे आप अनुमान लगा सकते हैं)।

todo.toggle() के मान को बदल रहा है और इनपुट की कक्षा बदलने के लिए वहां बदल रहा है।

यह कक्षा के नाम के लिए एक उदाहरण है लेकिन वास्तव में आप सीएसएस गुणों के लिए एक ही विचार कर सकते हैं।

मुझे आशा है कि यही तुम्हारा मतलब है।

यह उदाहरण here महान अंडेहेड ट्यूटोरियल के लिए लिया गया here


मैंने यह प्लंकर किया जो आप चाहते हैं कि वह करने के लिए एक तरीका तलाशें

यहां मुझे मूल घटक से mystyle मिल गया है लेकिन आप इसे एक सेवा से प्राप्त कर सकते हैं।

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

@Component({
  selector: '[my-person]',
  inputs: [
    'name',
    'mystyle: customstyle'
  ],
  host: {
    '[style.backgroundColor]': 'mystyle.backgroundColor'
  }
})
@View({
  template: `My Person Component: {{ name }}`
})
export class Person {}

1) इनलाइन शैलियों का उपयोग करना

<div [style.color]="myDynamicColor">

2) आप जो चाहते हैं उसे कई सीएसएस वर्ग मैपिंग का उपयोग करें और कक्षाएं जैसे:

 /* CSS */
 .theme { /* any shared styles */ }
 .theme.blue { color: blue; }
 .theme.red { color: red; }

 /* Template */
 <div class="theme" [ngClass]="{blue: isBlue, red: isRed}">
 <div class="theme" [class.blue]="isBlue">

कोड नमूने से: https://angular.io/cheatsheet

NgClass निर्देश पर अधिक जानकारी: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html





angular-dart