1. घर
  2. सवाल और जवाब
  3. क्या कोणीय 2 छाया डोम या वर्चुअल डोम का उपयोग करता है?

क्या कोणीय 2 छाया डोम या वर्चुअल डोम का उपयोग करता है?

2016-09-28 8 views

उत्तर

17

Angular2 छाया डोम (डिफ़ॉल्ट) और न ही आभासी डोम उपयोग नहीं करता।

encapsulation: ViewEncapsulation.Emulated (डिफ़ॉल्ट) के साथ छाया डोम है क्योंकि शैली encapsulation केवल नकल है।

encapsulation: ViewEncapsulation.Nativeशैडो डोम को ब्राउज़र पर सक्रिय रूप से समर्थन करने वाले ब्राउज़र पर सक्षम बनाता है या फिर वेबकंपोनेंट पॉलीफिल लोड होने पर इसे फिर से नकल किया जाता है।

छाया डोम वर्चुअल डोम के रूप में प्रदर्शन को लक्षित नहीं कर रहा है, लेकिन शैली encapsulation।

कोणीय 2 वर्चुअल डोम का उपयोग नहीं करता है।

Angular2 परिवर्तन का पता लगाने कि मॉडल में परिवर्तन का पता लगाता है और केवल डोम कि मॉडल परिवर्तन के अनुसार परिवर्तित करने की आवश्यकता के कुछ हिस्सों को अद्यतन करता है।

अधिक जानकारी के लिए Angular2 + ViewEncapsulation संपत्ति के बारे में अधिक उजागर देते भी Is shadow DOM fast like Virtual DOM in React.js?

स्रोत

2016-09-28 06:37:24

+1

देखें है क्या [छाया डोम] (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM) [MDN साइट] पर (https: //developer.mozilla .org/en-US /) और [ViewEncapsulation] (https://angular.io/guide/component-styles#view-encapsulation) [कोणीय मार्गदर्शिका] में (https://angular.io/guide/) –

5

देखते हैं।

नीचे उल्लिखित निम्नलिखित कोड पर विचार करें। यहां हमारे पास सीएसएस क्लास ("टेस्ट") है जो वैश्विक (index.html) और इनलाइन (app.component.ts) दोनों के रूप में परिभाषित है। आइए देखें कि डोम बर्ताव करता है जब हम कई ViewEncapsulation गुण के लिए स्विच:

नमूना कोड:

 //index.html 
.... 
<style> 
    .test {background: green;} 
</style> 
.... 
<body> 
    <div class="test">Test!</div> 
    <my-app> 
     Loading... 
    </my-app> 
</body> 
.... 

//app.component.ts 

@Component({ 
selector: 'my-app', 
encapsulation: ViewEncapsulation.Emulated, 
styles: [` 
    .test { 
    padding: 40px; 
    } 
`], 
template: ` 
    <div class="test"> 
    <div> Title: {{ title }} </div> 
    <input type="text" [(ngModel)]="title"> 
    </div> 
    ` 
})

एक। ViewEncapsulation.Emulated (डिफ़ॉल्ट)

  • विशेषताओं की तरह _nghost और _ngcontent और तरह .test [_ngcontent-CMY-1] सीएसएस उत्पन्न होगा। यह encapsulated शैलियों का अनुकरण कर रहा है, क्योंकि कोणीय प्रति घटक अद्वितीय सामग्री कुंजी उत्पन्न कर रहा है जो सीएसएस गुणों में मैप किए जाते हैं। यह शक्तिशाली है !!!
  • तो अगर हम सीएसएस संपत्ति परस्पर विरोधी है, यह हमेशा घटक फ़ाइल वैश्विक नहीं
  • तो अंदर परिभाषित एक का उपयोग करेगा कोई परस्पर विरोधी यह घटक से उस वर्ग + इनलाइन स्टाइल के लिए वैश्विक स्टाइल का प्रयोग करेंगे
  • इसका मतलब है कि हम सीएसएस वैश्विक रूप से लिखना विरासत में होगा, हालांकि घटक के अंदर एक ही कक्षा का उपयोग करके परिभाषित शैलियों को स्थानीय रूप से केवल उस घटक के लिए स्कॉप्ड किया जाएगा।

बी। ViewEncapsulation.Native

  • यह किसी भी वैश्विक सीएसएस उस वर्ग के लिए विशेषताओं का उपयोग नहीं होगा।
  • मतलब है कि हम जिस सीएसएस को वैश्विक स्तर पर लिखते हैं वह वारिस नहीं होगा, हालांकि घटक के अंदर एक ही कक्षा का उपयोग करके परिभाषित शैलियों को स्थानीय रूप से उस घटक को स्कॉप्ड किया जाएगा, जो कि छाया डोम के साथ बिल्कुल अपेक्षित है।

  • यह एक छाया डोम जो डोम के अंदर डोम और कोणीय द्वारा उत्पन्न कि डोम सुरक्षित है की तरह है और सब कुछ अंदर ▾ # छाया-रूट छाया डोम है उत्पन्न करता है, यह पूरी तरह से पूरी तरह ही है और एक अलग डोम पेड़ के दायरे वाला है। यही कारण है कि शैलियों विरासत में नहीं हैं!

  • तो यह हमेशा घटक स्टाइल का उपयोग करेगा चाहे कोई भी विवादित हो या नहीं।

सी। ViewEncapsulation.None

  • इसका मतलब है कि सीएसएस हम विश्व स्तर पर लिखने प्राप्त कर लेंगे, फिर भी शैलियों घटक के अंदर एक ही कक्षा का उपयोग कर मौजूदा स्टाइल को पार कर जाएगी परिभाषित किया।

  • यहां कुछ भी पसंद नहीं है।

स्रोत

2017-12-04 09:37:56

संबंधित मुद्दे

 संबंधित मुद्दे