कोणीय 2 - आंतरिक HTML स्टाइल

170

मुझे HTTP कॉल्स से HTML कोड्स का हिस्सा मिल रहा है। मैंने HTML ब्लॉकों को एक चर में डाला और इसे अपने पेज पर [innerHTML] के साथ सम्मिलित किया, लेकिन मैं सम्मिलित HTML ब्लॉक को स्टाइल नहीं कर सकता। क्या किसी के पास कोई सुझाव है कि मैं इसे कैसे प्राप्त कर सकता हूं?

@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService], 
styles: [` 
h3 {color:red;}
`})

जिस HTML को मैं स्टाइल करना चाहता हूं, वह "कैलेंडर" चर में निहित ब्लॉक है।

angular innerhtml

— जकोब स्वेन्सिंगसन
स्रोत

शैली कहाँ से? घटक के भीतर या शैलियों से जोड़ा गया index.html?

— गुंटर ज़ोचबॉयर

आपका क्या मतलब है can not style the inserted HTML block? हमें दिखाएँ कि कोड के छोटे स्निपेट के साथ इसके लिए क्या किया है।

— माइक्रोनिक्क्स

Ive ने कोड स्निपेट के साथ अपनी पोस्ट अपडेट की! :) धन्यवाद

— जेकब स्वेनिंगसन

1

मैंने अपने उत्तर में प्लंकर लिंक जोड़ा

— गुंटर

@ GünterZöchbauer क्या होगा यदि HTML कोड में इनलाइन css हो? इसका प्रतिपादन कैसे किया जाएगा?

— iniravpatel

320

अद्यतन २ ::slotted

::slotted अब सभी नए ब्राउज़रों द्वारा समर्थित है और इसके साथ उपयोग किया जा सकता है ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

अद्यतन 1 :: एनजी-डीप

/deep/को हटाकर उसकी जगह ले लिया गया ::ng-deep।

::ng-deep पहले से ही पदावनत चिह्नित है, लेकिन अभी तक कोई प्रतिस्थापन उपलब्ध नहीं है।

जब ViewEncapsulation.Nativeसभी ब्राउज़रों द्वारा सही तरीके से समर्थन किया जाता है और स्टाइलिंग अडोवर शैडो डोम सीमाओं का समर्थन करता है, ::ng-deepतो संभवतः बंद कर दिया जाएगा।

मूल

कोणीय HTML के सभी प्रकार के सीएसएस वर्गों को जोड़ता है जो कि डोम में जोड़ता है शैडो डोम सीएसएस एन्कैप्सुलेशन को घटकों के अंदर और बाहर रक्तस्राव की शैलियों को रोकने के लिए। कोणीय भी आप इन जोड़ा वर्गों से मेल करने के लिए जोड़ने सीएसएस को फिर से लिखता है। HTML के लिए [innerHTML]इन वर्गों का उपयोग करके जोड़ा नहीं गया है और फिर से लिखा सीएसएस मेल नहीं खाता है।

वर्कअराउंड के रूप में प्रयास करें

सीएसएस घटक के लिए जोड़ा गया

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

सीएसएस के लिए जोड़ा गया index.html

/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

>>>(और समतुल्य /deep/लेकिन /deep/SASS के साथ बेहतर काम करता है) और ::shadow2.0.0-beta.10 में जोड़ा गया था। वे छाया डोम सीएसएस कॉम्बिनेटर (जो पदावनत हैं) के समान हैं और केवल वही काम करते हैं encapsulation: ViewEncapsulation.Emulatedजो Angular2 में डिफ़ॉल्ट है। वे शायद साथ काम भी करते ViewEncapsulation.Noneहैं लेकिन तब उन्हें अनदेखा कर दिया जाता है क्योंकि वे आवश्यक नहीं हैं। ये कॉम्बिनेटर केवल एक मध्यवर्ती समाधान हैं जब तक क्रॉस-घटक स्टाइल के लिए अधिक उन्नत सुविधाओं का समर्थन नहीं किया जाता है।

एक और दृष्टिकोण का उपयोग करना है

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

आपके सीएसएस को ब्लॉक करने वाले सभी घटकों के लिए (यह निर्भर करता है कि आप सीएसएस कहां से जोड़ते हैं और एचटीएमएल यह है कि आप किस शैली को चाहते हैं - आपके आवेदन में सभी घटक हो सकते हैं)

अपडेट करें

उदाहरण प्लंकर

— गुंटर ज़ोचबॉयर
स्रोत

6

किसी के लिए बस एक नोट, यह नोड-एसएएस के साथ या स्टाइल यूआरएल के साथ काम नहीं करता है। केवल शैलियों में: [...]

— तुलीहा

12

SASS के उपयोग के /deep/बजाय>>>

— Günter Zöchbauer

1

आपके पास सामग्री में निर्देश या संकलन हो सकते हैंinneeHTML

— गुंटर

1

यदि HTTP कॉल द्वारा प्रदान किया गया HTML बड़ा है और इसमें इनलाइन css है तो यह कैसे संभव होगा क्योंकि मेरे पास स्टाइल पूर्वनिर्धारित नहीं हैं, मैं इसे केवल इनलाइन css से प्राप्त कर रहा हूँ @ GünterZöchbauer

— inirapatelel

1

कोणीय 8 में दिन को बचाया! Thanx। इस उत्तर को खोजने के लिए प्रश्न को ठीक से प्राप्त करना कठिन है!

— पियानोमन

12

आपको जो सरल उपाय अपनाने की आवश्यकता है, वह है

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer){}

transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}

— साहिल रलकर
स्रोत

2

यदि आप गतिशील रूप से HTML तत्वों को एक कोणीय घटक के अंदर जोड़ने की कोशिश कर रहे हैं, तो यह मददगार हो सकता है:

// inside component class...

constructor(private hostRef: ElementRef) { }

getContentAttr(): string {
  const attrs = this.hostRef.nativeElement.attributes
  for (let i = 0, l = attrs.length; i < l; i++) {
    if (attrs[i].name.startsWith('_nghost-c')) {
      return `_ngcontent-c${attrs[i].name.substring(9)}`
    }
  }
}

ngAfterViewInit() {
  // dynamically add HTML element
  dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '')
}

मेरा अनुमान है कि इस विशेषता के लिए कन्वेंशन को एंगुलर के संस्करणों के बीच स्थिर रहने की गारंटी नहीं है, ताकि एंगुलर के एक नए संस्करण में अपग्रेड करते समय इस समाधान के साथ समस्याओं में भाग लिया जा सके (हालांकि, इस समाधान को अपडेट करना संभवतः तुच्छ होगा। मामला)।

— ट्रेवर
स्रोत

2

हम अपने CMS से सामग्री को अक्सर खींचते हैं [innerHTML]="content.title"। हम styles.scssघटक की scss फ़ाइल के बजाय एप्लिकेशन की रूट फ़ाइल में आवश्यक कक्षाएं लगाते हैं। हमारे सीएमएस जानबूझकर इन-लाइन शैलियों को स्ट्रिप्स करते हैं, इसलिए हमारे पास ऐसी कक्षाएं होनी चाहिए जो लेखक अपनी सामग्री में उपयोग कर सकते हैं। {{content.title}}टेम्पलेट में उपयोग करना याद रखें सामग्री से html रेंडर नहीं करेगा।

— Lyfo
स्रोत

-3

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

npm install node-sass --save-dev

ताकि आप विकास के लिए / गहरा / उपयोग कर सकें।

— ब्रायन लू
स्रोत