परिवर्तनीय कोणीय 4

Question

पर आधारित गतिशील सीएसएस उत्पन्न करें मैं कोणीय 4 के साथ विकसित एक व्यवस्थापक पैनल पर काम कर रहा हूं और स्टाइल रंग, बीजी इत्यादि जैसे स्टाइल को अनुकूलित करने के लिए एक वर्ग को एकीकृत करने की कोशिश कर रहा हूं मैंने डेटाबेस में सेटिंग्स को सहेजने के लिए पहले ही एक सेक्शन विकसित किए हैं एपीआई का उपयोग कर जेसन के रूप में उन्हें ऐप लोड पर मिला।

अब मैं json मानों का उपयोग करके एक गतिशील सीएसएस उत्पन्न करने के लिए कोशिश कर रहा हूँ, मैं मुख्य घटक में कोड निम्नलिखित लेकिन इसके काम नहीं कर रहा

@Component({ 
     templateUrl: 'card.html', 
     styles: [` 
     .card { 
      height: 70px; 
      width: 100px; 
      color: {{css.cardColor}}; 
     } 
     `], 
}) 

साथ की कोशिश की मुझे यकीन है कि मैं कैसे घटक में सीएसएस मूल्यों लोड करना चाहिए नहीं कर रहा हूँ और स्टाइल टैग में उनका इस्तेमाल करें। मुझे इसके लिए कोई अन्य समाधान नहीं मिला।

एक और तरीका कोणीय एनीमेशन अवधारणा का उपयोग करना है, लेकिन सीएसएस बहुत बड़ा होने जा रहा है और ट्रिगर्स और सभी का उपयोग करके कोणीय एनीमेशन के साथ इसे पूरा करना संभव नहीं है। मेरा मानना ​​है कि इसके लिए एक समाधान है क्योंकि यह वास्तविक आवश्यकताओं को लगता है और कई अन्य डेवलपर्स द्वारा किया जाना चाहिए था।

कोई भी मदद सराहनीय है।

संपादित करें: ngStyle का उपयोग नहीं कर सकता क्योंकि यह लगभग सभी तत्वों पर लागू होता है क्योंकि यह पूरे अनुप्रयोग के लिए है और न केवल विशिष्ट तत्व के लिए।

Answer 1

और मैं निम्नलिखित समाधान के साथ समाप्त हो गया कोणीय एप्लिकेशन पर सभी पृष्ठों के लिए गतिशील सीएसएस जोड़ने के लिए संपर्क किया।

आवश्यकता: डिज़ाइन और स्टाइल बदलने के लिए और एपीआई से लौटाए गए मानों के आधार पर गतिशील सीएसएस उत्पन्न करें।

समाधान:

1. एक नया घटक बना सकते हैं और एपीआई से गतिशील सीएसएस चर लोड करने के लिए एक सेवा पैदा करते हैं।
2. टेम्पलेट फ़ाइल में शैली टैग जोड़ें और गुणों के लिए चर मूल्यों का उपयोग करें।
3. इस टेम्पलेट को सभी पृष्ठों या मुख्य टेम्पलेट पर लोड करें।
4. ऐप बिल्ड शैली पर हेड टैग पर ले जाया जाएगा।

कोड का नमूना

import { CssService} from './Css.service'; 

@Component({ 
    selector: 'DynamicCss', 
    templateUrl: './DynamicCss.component.html', 
    styleUrls: ['./DynamicCss.component.scss'] 
}) 
export class ServiceProviderComponent implements OnInit { 
    cssVariables: any; 
    constructor(private cssService:CssService){ 
     /* call the service/api to get the css variable values in cssVariables */ 

    } 
} 

टेम्पलेट

<style> 
.css_class{ 
    background: {{cssVariables.bgcolor}}; 
    color: {{cssVariables.fontcolor}}; 
} 
</style> 

Answer 2

आप जेसन से अपने पृष्ठ पर सीएसएस जोड़ने के लिए ngStyle का उपयोग कर सकते हैं।

<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div> 

एक ही का एक और उदाहरण

<div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover' }"></div> 

यहाँ मैं json से पृष्ठभूमि छवि लोड किया जा सकता है

Answer 3

ngClass

नीचे के रूप में अपने चर मूल्य के गतिशील वर्ग आधार स्थापित करने के लिए इस्तेमाल होता है

Ts File Component 
    @Component ({ 
      selector:'simple-comp', 
      template:` <ol class="breadcrumb"> 
     <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li> 
     <li *ngClass="{'active': step==='step2'}" (click)="step='step2'">Step2</li> 
     <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li> 
     </ol>` 
     }) 
    export class SimpleComponent { 
    public step: string = 'step1'; // change value like step1, step2, step3 
    } 

angular.io का संदर्भ: https://angular.io/api/common/NgClass

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> 

Answer 4

आप अलग अलग तरीकों के माध्यम से जाने के बाद केवल बाध्यकारी कर सकते हैं "style.color"

<div class="card" [style.color]=cardColor>lorem ipsum</div>