एक गुणक चयनकर्ता के साथ एक कोणीय 2 घटक का उपयोग किया जा सकता है?

Question

वर्तमान में हमारे पास एक मौजूदा छोटा कोणीय 1 प्रोजेक्ट है जिसका उपयोग परिसर Sharepoint 2013 पर्यावरण पर किया जाता है। हमारी सामग्री के एक बड़े हिस्से के लिए, हम शेयरपॉइंट पर्यावरण पर प्रकाशन पृष्ठों का उपयोग करते हैं।

कोणीय 1 के साथ, हम निर्देशों को परिभाषित करने के लिए परिभाषित कर सकते हैं: मिलान विशेषता नाम, टैग नाम, टिप्पणियां, या कक्षा का नाम। हमारे द्वारा बनाए गए अधिकांश निर्देश विशेषता या टैग नाम थे। वरीयता टैग का नाम होता, लेकिन शेयरपॉइंट पर प्रकाशन मंच अज्ञात तत्वों को स्ट्रिप्स करता है। तो इसका मतलब है कि प्रकाशन पृष्ठों में हमारे निर्देश लाने के लिए हमें विशेषताओं का उपयोग करने के साथ छोड़ दिया गया था। हालांकि कोणीय 2 के साथ, मैंने केवल टैग नाम द्वारा लागू घटकों को देखा है।

क्या हमारे घटकों का उपयोग करने के लिए एंगुलर 2 का उपयोग गुण नामों का उपयोग करना संभव है? शेयरपॉइंट प्रकाशन मंच में प्रतिबंधों के कारण यह हमारे लिए एक आवश्यकता है।

धन्यवाद।

Answer 1

हाँ, @Component डेकोरेटर की selector संपत्ति एक CSS selector (या के एक सबसेट) है:

selector:'.cool-button:not(a)'

एक CSS चयनकर्ता कि एक टेम्पलेट के भीतर इस निर्देश को दिखाता है निर्दिष्ट करता है। समर्थित चयनकर्ताओं में element, [attribute], .class, और :not() शामिल हैं।
माता-पिता-संबंध संबंध चयनकर्ताओं का समर्थन करता है।

_{स्रोत:Angular Cheat Sheet/Directive Configuration, जो @Component इनहेरिट करती है।}

इस तरह आप [name-of-the-attribute] उपयोग कर सकते हैं (यानी, CSS attribute selector), जैसे:

@Component({ 
    selector: "[other-attr]", 
    ... 
}) 
export class OtherAttrComponent { 

Se demo plunker here।

हमेशा की तरह CSS type (AKA element or tag) selector है:

@Component({ 
    selector: "some-tag", 
    ... 
}) 

और यह नाम some-tag के साथ एक टैग से मेल खाता है।

@Component({ 
    selector: "other-both,[other-both]", 
    template: `this is other-both ({{ value }})` 
}) 
export class OtherBothComponent { 

Demo plunker इन तीनों का उदाहरण दिए गए हैं:

तुम भी एक घटक है कि both a tag or an attribute से मेल खाता हो सकता है।

[attributeName="attributeValue"] समर्थित है?

हां। लेकिन उद्धरणों पर ध्यान दें। वर्तमान कार्यान्वयन में, चयनकर्ता [attributeName="attributeValue"] वास्तव में <sometag attributeName='"attributeValue"'> से मेल खाता है, इसलिए इस दृष्टिकोण को करने से पहले परीक्षण करें।

Answer 2

हां, इस https://angular.io/docs/ts/latest/guide/cheatsheet.html के अनुसार (घटक और निर्देश सामान्य रूप से बहुत समान हैं)। इसके बजाय तत्व चयनकर्ता का उपयोग करके की:

selector: 'custom-element-name' 

उपयोग:

selector: '[custom-attribute-name]' 

और अपने माता पिता के घटक के टेम्पलेट में:

<div custom-attribute-name></div> 

Answer 3

बिल्कुल। मूलतः यह सिर्फ एक सीएसएस चयनकर्ता है, तो आप उपयोग करने की आवश्यकता है, तो विशेषता तुम सिर्फ ऐसा करते हैं:

@Component({ 
    selector: "my-tag[with-my-attribute]" 
}) 

Answer 4

@Component डेकोरेटर समर्थन, तत्व चयनकर्ता, विशेषता चयनकर्ता और वर्ग चयनकर्ता की चयनकर्ता संपत्ति:

1. तत्व चयनकर्ता:

@Component({ 
selector: 'custom-element-name' 
}) 

उपयोग:<app-servers></app-servers>

2 विशेषता चयनकर्ता:

@Component({ 
selector: '[custom-element-name]' 
}) 

उपयोग:<div app-servers></div>

3. कक्षा चयनकर्ता:

@Component({ 
selector: '.custom-element-name' 
}) 

उपयोग:<div class="app-servers"></div>

नोट: कोणीय 2 आईडी और दिखावटी का समर्थन नहीं करता o चयनकर्ता