meaning - angularjs tutorial pdf




Angular2 में गतिशील घटक चयन (2)

  1. जैसा कि त्रुटि कहती है, एक घटक के पास एक अद्वितीय चयनकर्ता होना चाहिए। यदि आप घटक व्यवहार को चयन करने के लिए बाँधना चाहते हैं जैसे कि [type='bool'] साथ चयनकर्ता को निर्देश का उपयोग करना होगा। अपने BoolComponent लिए selector='bool-field' उपयोग करें।

  2. जैसा कि त्रुटि कहती है, आपके जेनेरिक <field> घटक में बाइंड करने के लिए एक type विशेषता नहीं है। आप इनपुट सदस्य चर जोड़कर इसे ठीक कर सकते हैं: @Input() type: string;

  3. आप घटक टेम्पलेट को एक एकल घटक में सौंपना चाहते हैं जो एक type विशेषता प्राप्त करता है। बस उस जेनेरिक कंपोनेंट और दूसरे कंपोनेंट का इस्तेमाल करें, जो इसका इस्तेमाल करें, केवल उसे ही देना होगा, उसके बच्चों को नहीं।

उदाहरण: http://plnkr.co/edit/HUH8fm3VmscsK3KEWjf6?p=preview

@Component({
  selector: 'generic-field',
  templateUrl: 'app/generic.template.html'
})
export class GenericFieldComponent {
  @Input() 
  fieldInfo: FieldInfo;
}

टेम्पलेट का उपयोग करना:

<div>
  <span>{{fieldInfo.caption}}</span>

  <span [ngSwitch]="fieldInfo.type">
    <input  *ngSwitchWhen="'bool'" type="checkbox" [value]="fieldInfo.value === 1">  
    <input  *ngSwitchWhen="'text'" type="text" [value]="fieldInfo.value">  
    <select  *ngSwitchWhen="'options'" type="text" [value]="fieldInfo.value">
      <option *ngFor="let option of fieldInfo.options" >
        {{ option }}
      </option>
    </select>  
  </span>
</div>

इस सवाल का पहले से ही यहाँ एक जवाब है:

एक पृष्ठ अनुभाग के लिए एक मॉडल दिया गया है जिसमें कई क्षेत्र शामिल हैं और इस तरह से डेटा के साथ आबादी होगी:

{
    "fields": [
        {
            "id": 1,
            "type": "text",
            "caption": "Name",
            "value": "Bob"
        },
        {
            "id": 2,
            "type": "bool",
            "caption": "Over 24?",
            "value": 0
        },
        {
            "id": 3,
            "type": "options",
            "options" : [ "M", "F"],
            "caption": "Gender",
            "value": "M"
        }
    ]
}

मैं एक जेनेरिक सेक्शन सम्‍मिलित करना चाहूंगा, जो विभिन्‍न प्रकार के क्षेत्रों के बारे में नहीं जानता है जो इसे लपेट सकते हैं, अनुभाग टेम्‍पलेट में बहुत से सशर्त तर्क से बचने के लिए, और स्‍वयं को ड्राप करके जोड़े गए नए प्रकार के विचार / घटक बनाना एक अलग घटक को संशोधित करने के बजाय -contain फ़ाइल।

मेरा आदर्श एक घटक के चयनकर्ता के लिए विशिष्ट होगा कि मैं मॉडल के लिए बाध्य विशेषता मानों के आधार पर मूल घटक घटक के तत्व में एक तत्व का चयन करके इसे पूरा कर सकूं। उदाहरण के लिए: (जैसा कि मैंने एसओ विंडो में इसे कोडित किया है, किसी भी वाक्यविन्यास के मुद्दों पर ध्यान दें, मुख्य भाग BooleanComponent.ts पर चयनकर्ता है

SectionComponent.ts

@Component({
    selector: 'my-app'
})
@View({
    template: `
        <section>
            <div *ng-for="#field of fields">
                <field type="{{field.type}}"></field>
            </div>  
        </section>
    `,
    directives: [NgFor]
})
class SectionComponent {
    fields: Array<field>;
    constructor() {
        this.fields = // retrieve section fields via service
    }
}

FieldComponent.ts:

// Generic field component used when more specific ones don't match
@Component({
    selector: 'field'
})
@View({
    template: `<div>{{caption}}: {{value}}</div>`
})
class FieldComponent {
    constructor() {}
}

BooleanComponent.ts:

// specific field component to use for boolean fields
@Component({
    selector: 'field[type=bool]'
})
@View({
    template: `<input type="checkbox" [id]="id" [checked]="value==1"></input>`
})
class BooleanComponent {
    constructor() {}
}

... और समय के साथ मैं अन्य विशिष्ट फ़ील्ड प्रकारों के लिए विशेष टेम्प्लेट और व्यवहार प्रदान करने के लिए नए घटक जोड़ूंगा, या यहां तक ​​कि कुछ कैप्शन के साथ फ़ील्ड आदि।

यह काम नहीं करता है क्योंकि घटक चयनकर्ताओं को कम से कम एक साधारण तत्व का नाम (अल्फा.26 और अल्फा.27 में) होना चाहिए। गितुब वार्तालापों के मेरे शोध ने मुझे विश्वास दिलाया कि यह प्रतिबंध शिथिल हो रहा था, लेकिन मैं यह निर्धारित नहीं कर सकता कि मैं जो करना चाहता हूं वह वास्तव में समर्थित होगा।

वैकल्पिक रूप से, मैंने एक डायनामिककंपोनेंटलॉडर का उल्लेख देखा है, हालांकि अब मुझे वह उदाहरण नहीं मिल सकता है जो मुझे लगा कि मैं कोणीय.आईओ गाइड पर था। फिर भी, मुझे नहीं पता कि यह कैसे गतिशील रूप से एक घटक को लोड करने के लिए इस्तेमाल किया जा सकता है कि यह नाम या मिलान के मानदंडों को नहीं जानता है।

वहाँ एक तरीका है कि मैं क्या करने की कोशिश की तकनीक के समान या तो एक तकनीक का उपयोग कर अपने माता-पिता से विशेष घटकों को डिकोड करने के अपने उद्देश्य को पूरा करने का एक तरीका है, या मैं किसी भी तकनीक से अनजान 2 में हूं?

UPDATE 2015-07-06

http://plnkr.co/edit/fal9OA7ghQS1sRESutGd?p=preview

मैंने उन त्रुटियों को दिखाना सबसे अच्छा समझा जो मैं अधिक स्पष्ट रूप से चलाता हूं। मैंने कुछ सैंपल कोड के साथ एक प्लंक शामिल किया है, हालांकि इनमें से केवल 3 त्रुटियां दिखाई देंगी, क्योंकि प्रत्येक एक दूसरे को ब्लॉक करता है, इसलिए आप केवल एक समय में एक दिखावा कर सकते हैं। मैंने फिलहाल # 2 और # 3 पाने के लिए कड़ी मेहनत की है।

  1. क्या बूलियनकम्पोनेंट पर मेरा चयनकर्ता selector: 'field[type=bool]' या selector: '[type=bool]' , मुझे एंगुलर से एक त्रुटि स्टैक मिलता है जैसे

    घटक 'BooleanComponent' में केवल एक तत्व चयनकर्ता हो सकता है, लेकिन '[type = bool]' था

  2. <field [type]="field.type"></field> मेरे फ़ील्ड टाइप प्रकार के लिए मेरा मान बाइंड नहीं करता है, लेकिन मुझे यह त्रुटि देता है (जो शुक्र 28 अल्फा में अब दिखाता है। अल्फा 26 में मैं पहले था पर, यह चुपचाप विफल रहा)। मैं इस त्रुटि से अपने फील्डकॉमपेंटेंट और व्युत्पन्न बूलियनकंपोनेंट के लिए एक प्रकार की संपत्ति जोड़ने से छुटकारा पा सकता हूं और इसे @Component गुण संग्रह के साथ वायरिंग कर सकता हूं, लेकिन मुझे घटकों में कुछ भी इसकी आवश्यकता नहीं है।

    'प्रकार' के लिए बाध्य नहीं किया जा सकता क्योंकि यह 'फ़ील्ड' तत्व की संपत्ति नहीं है और संबंधित संपत्ति के साथ कोई मेल खाने वाले निर्देश नहीं हैं

  3. मैं अपने सेक्शनकॉमपेंटेंट व्यू एनोटेशन के निर्देशों की सूची में FieldComponent और BooleanComponent को सूचीबद्ध करने के लिए मजबूर हूं, या उन्हें ढूंढकर लागू नहीं किया जाएगा। मैंने कोणीय टीम से डिज़ाइन चर्चाएँ पढ़ीं जहाँ उन्होंने बाहरी पुस्तकालयों में निर्देशों के साथ टकराव की घटनाओं को कम करने के लिए खोजकर्ता के पक्ष में यह जागरूक निर्णय लिया, लेकिन यह ड्रॉप-इन घटकों के पूरे विचार को तोड़ता है जिसे मैं प्राप्त करने की कोशिश कर रहा हूं।

इस बिंदु पर, मैं यह देखने के लिए संघर्ष कर रहा हूं कि क्यों Angular2 भी चयनकर्ताओं को परेशान करता है। मूल घटक को पहले से ही यह जानना होगा कि उसके पास कौन से बच्चे घटक होंगे, वे कहाँ जाएंगे, और उन्हें किस डेटा की आवश्यकता होगी। चयनकर्ता इस समय पूरी तरह से कमतर हैं, यह सिर्फ क्लास नाम मिलान का एक सम्मेलन हो सकता है। मैं उन घटकों के बीच अमूर्तता नहीं देख रहा हूँ, जिन्हें मुझे उन्हें अलग करने की आवश्यकता होगी।

Angular2 ढांचे की क्षमता में इन सीमाओं के कारण, मैं अपनी खुद की घटक पंजीकरण योजना बना रहा हूं और उन्हें DynamicsComponentLoader के माध्यम से रख रहा हूं, लेकिन मैं अभी भी उन लोगों के लिए किसी भी प्रतिक्रिया को देखने के लिए बहुत उत्सुक हूं, जिन्होंने इसे पूरा करने का एक बेहतर तरीका ढूंढ लिया है। ।


मुझे कुछ समय लगा, लेकिन मैं देख रहा हूं कि आप क्या करने की कोशिश कर रहे हैं। अनिवार्य रूप से एनजी 2 के लिए एक अनिवार्य रूप से लाइब्रेरी बनाएं, जैसे कोणीय-औपचारिक रूप से। आप जो करने की कोशिश कर रहे हैं वह डॉक्स में शामिल नहीं है, लेकिन अनुरोध किया जा सकता है। वर्तमान विकल्पों को लाइनों 419 - 426 से एनोटेशन के तहत पाया जा सकता है।

यह समाधान कुछ झूठी सकारात्मकता के लिए अग्रणी का चयन करेगा, लेकिन इसे आज़माएं।

<field type="{{field.type}}"></field> से <field [type]="field.type"></field>

फिर विशेषता के लिए चयन करें:

@Component({
  selector: '[type=bool]'
})




angular