2016-01-13 24 views
7

के भीतर पॉलिमर तत्व मेरे पास कस्टम बहुलक तत्वों का एक सेट है, जिसे मैं एक कोणीय 2 अनुप्रयोग के भीतर उपयोग करना चाहता हूं।कोणीय 2 घटक

ऐसा लगता है जैसे बहुलक तत्व के सामग्री टैग से संबंधित कोई समस्या है। यदि तत्व एक कोणीय 2 घटक के भीतर स्थित है, तो तत्व की सामग्री बहुलक तत्व के भीतर गलत जगह पर प्रदान की जाती है।

उदाहरण:

<template> 

    <button> 
    <content></content> 
    </button> 

</template> 

कोणीय

बाहर का प्रयोग करें जब मैं अपने कोणीय के बाहर इस तत्व का उपयोग करें:

मेरी बहुलक तत्व के टेम्पलेट "मेरे बटन" इस तरह दिखता है 2 घटक, मुझे परिणाम मिलता है जो मुझे उम्मीद थी:

उपयोग करें:

<my-button>Foo</my-button> 

परिणाम: कोणीय 2 घटक

जब एक कोणीय 2 घटक के भीतर इस्तेमाल भीतर

<my-button> 
    <button> 
    Foo 
    </button> 
<my-button> 

का प्रयोग करें, सामग्री हमेशा तत्वों टेम्पलेट के अंत में प्रदान की गई हो जाता है। जैसे सामग्री टैग मौजूद नहीं था।

उपयोग:

<my-button>Foo</my-button> 

परिणाम:

<my-button> 
    <button> 

    </button> 
    "Foo" 
<my-button> 

प्रश्न

समस्या हो सकती है, कि बहुलक और कोणीय 2 दोनों transclution के लिए सामग्री टैग का उपयोग करें। तो दोनों एक साथ दोनों का उपयोग करते समय थोड़ा गन्दा हो सकता है।

मुझे अपने सभी बहुलक तत्वों को कोणीय 2 के अंदर उपयोग करना अच्छा लगेगा। इसलिए इसे ठीक करने के तरीके पर किसी भी विचार की बहुत सराहना की जाएगी।

+1

आप किसी भी कोणीय लिपियों लागू करने से पहले 'WebComponentsReady' घटना को सुन करने की कोशिश की पर प्रकाशित किया जाएगा? –

उत्तर

8

पॉलिमर के साथ संयुक्त कोणीय 2 के बारे में कुछ खुले मुद्दे हैं। उदाहरण के लिए कोणीय एक पॉलिमर तत्व बच्चों में हेरफेर करने के लिए Polymer.dom(el)... का उपयोग नहीं करता है। यह शायद आपके घटकों को तोड़ देता है। एक कामकाज पूर्ण छाया डोम और पॉलीफिल को सक्षम करना है। https://www.polymer-project.org/1.0/docs/devguide/settings.html

एक मुद्दा मैं नहीं मिला है एक समाधान अभी तक गुजर रहा है <template> रों (जैसे <iron-list> के लिए उदाहरण के लिए आवश्यक देखें। कोणीय संभालती है अपने आप ही टेम्पलेट्स और यह पॉलिमर तत्व के पास नहीं है।

वहाँ एक ngNonBindable निर्देश है। मैं अपने आप को <template ngNonBindable> पर फिर भी यह प्रयास नहीं किया है, लेकिन यह काम हो सकता है। मैंने कोशिश की ऐसा लगता है कि केवल [prop]="field"/prop="{{field}} बाइंडिंग की अनदेखी करने के।

एक और मुद्दा <style is="custom-style"> साथ है।उन्हें केवल <head> तत्व या पॉलिमर तत्वों में ही जोड़ा जा सकता है, लेकिन कोणीय घटकों के लिए नहीं।

भी देखें Two-way binding in Angular 2 with NgModel and mutating bound property?

+0

ive बहुलक घटकों की कोशिश कर रहा है, उदाहरण के लिए पेपर-चेकबॉक्स लें, अब अगर मैं चेक की गई संपत्ति को बांधता हूं '[चेक] = "myselection"' यह आसान बुलियन सेट करता है लेकिन चेक किए जाने पर नहीं मिलता है? क्या कोई स्पष्टीकरण है कि ये तत्व इस तरह से व्यवहार क्यों करते हैं? पीएस मैंने dom = 'shady' –

+0

को सक्षम किया है @ छायािक केलवाल्कर पॉलिमर छायादार डोम के साथ Angular2 के साथ अच्छी तरह से काम नहीं करता है। मैं इसके बजाय छाया डोम सक्षम करने का सुझाव देता हूं। सुनिश्चित नहीं है कि आपका क्या मतलब है "लेकिन चेक किए जाने पर नहीं मिलता है"। आपको '[चेक] =" myselection "की आवश्यकता होगी (चेक किया गया चेंज) =" myselection = $ event "' (खुद का परीक्षण नहीं किया गया) –

+0

ठीक है धन्यवाद ज़ोची, आईएल आज़माएं, मैं क्या चाहता था कि यह पता लगाना कि चेक बॉक्स चेक किया गया था या नहीं विशेषता [चेक], लेकिन मैं बुलियन प्राप्त करने में सक्षम नहीं था, बल्कि केवल मूल्य निर्धारित करने में सक्षम था। –

7

बाहर चेक https://www.npmjs.com/package/@vaadin/angular2-polymer, जो कोणीय 2.

उपयोगकर्ता गाइड करने के लिए पॉलिमर तत्वों को एकीकृत करने में अधिकांश समस्याओं का समाधान करना चाहिए: https://github.com/vaadin/vaadin-core-elements/blob/master/docs/angular2.adoc

ट्यूटोरियल (ड्राफ्ट): https://github.com/vaadin/angular2-polymer/blob/d4581e8fd82841eea84ef40e16e262a12ee4b082/docs/tutorial.adoc

बेहतर छायादार डोम समर्थन एक अलग शाखा से विलय करने का इंतजार कर रहा है (विलय और दो सप्ताह के भीतर जारी किया जाना चाहिए): https://github.com/vaadin/angular2-polymer/tree/feature/polymer-dom-adapter

यह बहुत अच्छा होगा अगर आप इसे आजमा सकते हैं और देख सकते हैं कि यह आपके लिए काम करता है या नहीं!

आखिरकार, प्रलेखन https://vaadin.com/docs/

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