मेरे घटक में मेरे पास एक टेम्प्लेट शाब्दिक स्ट्रिंग है जिसमें एक HTML टैग है जिसमें एक कैमलकेस विशेषता है:

htmlString = `<mat-icon svgIcon="edit" ...></mat-icon>`;

यह स्ट्रिंग प्रत्येक लूप के लिए एक सरणी में किसी ऑब्जेक्ट की संपत्ति के रूप में इकट्ठी हो जाती है।

टेम्पलेट में कई कारणों से मुझे इसे *ngFor लूप के भीतर एक innerHtml विशेषता में आउटपुट करने की आवश्यकता है:

<li *ngFor="let foo of foos" [innerHTML]="foo.htmlString"></li>

(यह मेरे कार्यान्वयन का एक सरलीकृत कोड उदाहरण है।)

मुझे पता चला कि आउटपुट में svgIcon विशेषता को लोअरकेस svgicon में प्रस्तुत किया गया है, DOM इंस्पेक्टर आउटपुट देखें:

<li _ngcontent-qui-c96="">
  <mat-icon svgicon="edit"></mat-icon>
</li>

बग या फीचर? इस व्यवहार के बारे में कोई जानकारी नहीं मिली। किसी भी संकेत के लिए धन्यवाद!

3
Jean D. 18 मार्च 2020, 12:52

1 उत्तर

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

एंगुलर द्वारा एट्रीब्यूट्स को वास्तव में लोअरकेस में बदल दिया जाता है, इसके बारे में चिंता न करें।

साथ ही, आप जिस बिंदु को साइड-इफ़ेक्ट के रूप में उठा रहे हैं वह दिलचस्प है और इसके लिए कुछ स्पष्टीकरण की आवश्यकता हो सकती है: आप एक कोणीय घटक (mat-icon के साथ innerHtml का उपयोग करते हैं, यह एक मानक HTML टैग नहीं है)।

तो, वैसे भी, यह विफल हो जाएगा: एक वेब ब्राउज़र यह नहीं जानता कि mat-icon को कैसे प्रस्तुत किया जाए।

एक mat-icon को रेंडर करने के लिए, इसे एंगुलर टेम्प्लेट इंजन से गुजरना होगा: एंगुलर mat-icon को देखेगा, और कंपोनेंट डेफिनिशन/टेम्पलेट को खींचेगा, और इसे HTML टर्म्स (DOM) में रेंडर करेगा। ब्राउज़र समझ सकता है।

आमतौर पर आपके मामले में, आपको इसका उपयोग करना चाहिए:

<li *ngFor="let foo of foos">
  <mat-icon [svgIcon]="foo.icon" ...></mat-icon>
</li>

और यदि आपके घटक अधिक जटिल हैं, तो आप ng-content के साथ सामग्री प्रक्षेपण का उपयोग करके एक्सप्लोर कर सकते हैं।

1
Qortex 18 मार्च 2020, 10:52