मान लीजिए कि मैं डीओएम में गतिशील रूप से नया एचटीएमएल इंजेक्ट करता हूं।

<div [innerHTML]="htmlCode | sanitizeHtml">
...
</div>

टाइपस्क्रिप्ट के भीतर:

htmlCode : string = '<svg class = "foobar"'>....'

मैं घटक scss फ़ाइल में गतिशील रूप से एक नया वर्ग (इस मामले में foobar) कैसे जोड़ सकता हूँ? ध्यान दें कि कक्षा का नाम हर बार अलग हो सकता है इसलिए मैं इसे हार्ड कोड नहीं कर सकता

1
Jebathon 9 पद 2019, 01:17

2 जवाब

सबसे बढ़िया उत्तर

आप इस तरह [ngClass] का उपयोग करके कक्षा सेट कर सकते हैं:

<div [innerHTML]="htmlCode | sanitizeHtml" [ngClass]="dynamicClass">
...
</div>

फिर अपनी टीएस फाइल में:

htmlCode : string = '<svg class = "foobar"'>....'
dynamicClass: string = 'yourClassName';

अंत में, यदि आप शैलियों को गतिशील रूप से सेट करना चाहते हैं, तो आप इस तरह [ngStyle] का उपयोग कर सकते हैं:

<div [innerHTML]="htmlCode | sanitizeHtml" [ngClass]="dynamicClass" [ngStyle]="dynamicStyle">
...
</div>

फिर अपनी टीएस फाइल में:

htmlCode : string = '<svg class = "foobar"'>....'
dynamicClass: string = 'yourClassName';
dynamicStyle: string = {
    'color': 'red'
  }

यदि आप स्टाइल प्रॉपर्टी सेट करने के लिए पैरामीटर या वेरिएबल का उपयोग करना चाहते हैं तो आप यह कर सकते हैं:

setCustomColor(color: string): {
      dynamicStyle: string = {
        'color': `${color}`
      }
}
2
German Quinteros 9 पद 2019, 07:27

आप इसे अपने घटक में जोड़ सकते हैं और अपनी एससीएसएस फ़ाइल में अपनी इच्छित शैलियों को जोड़ सकते हैं

@Component({   ...   encapsulation: ViewEncapsulation.None, })
1
Salahddine Zridi 11 अगस्त 2020, 15:01
लेकिन मैं शैलियों को कैसे जोड़ूं?
 – 
Jebathon
9 पद 2019, 02:36