कोणीय 2

Question

में छद्म तत्वों की शैली बदलें शैली [style] या [ngStyle] का उपयोग करके कोणीय 2 में उपयोग कर छद्म तत्वों की शैली को बदलना संभव है?

एक div पर एक धुंध प्रभाव प्राप्त करने के लिए ओवरले की तरह कार्य करता है, और मुझे छद्म तत्व पर पृष्ठभूमि-छवि सेट अप करनी चाहिए।

मैं की तरह

<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ')'"> 

यह काम नहीं किया कुछ करने की कोशिश की। मैंने यह भी कोशिश की कि

<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ')}}'"> 

Answer 1

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

यदि आप छद्म तत्वों के साथ प्रोग्रामेटिक रूप से निपटना चाहते हैं तो सामान्य दृष्टिकोण अप्रत्यक्ष है: आप वर्ग को जोड़ते/हटाते/बदलते हैं और सीएसएस में इस वर्ग को संबंधित छद्म-तत्व को प्रभावित करते हैं। तो आपके मामले में आप एक और वर्ग है कि आवश्यक शैली में परिवर्तन हो सकता है:

.blur:before {/* some styles */} 
.blur.background:before {/* set background */} 

अब तुम सब करने की जरूरत है तत्व पर .background वर्ग टॉगल करने के लिए जब आप before छद्म तत्व की जरूरत है एक पृष्ठभूमि पाने के लिए है। उदाहरण के लिए आप NgClass का उपयोग कर सकते हैं।

Answer 2

आप सीएसएस चर के साथ जो भी चाहते हैं उसे प्राप्त कर सकते हैं।

.featured-image:after  { content: ''; 
          background-image: var(--featured-image); } 

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

<div class="featured-image" [ngStyle]="{'--featured-image': featuredImage}"> 

अपने शैली पत्रक में आप इस तरह की पृष्ठभूमि छवि सेट कर सकते हैं

यहां सीएसएस चर के बारे में अधिक जानकारी: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables ध्यान दें कि ब्राउज़र समर्थन अभी तक पूरा नहीं हुआ है।

भी ध्यान रखें कि आप यूआरएल/शैली sanitizer.bypassSecurityTrustResourceUrl(path) या sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')) का उपयोग कर साफ़ करने में जरूरत होगी: