angular - কৌণিক 2 তে ডায়নামিক উপাদান নির্বাচন




(2)

  1. ত্রুটিটি যেমন বলে, একটি উপাদানগুলির অবশ্যই একটি অনন্য নির্বাচক থাকতে হবে। আপনি যদি [type='bool'] সাথে নির্বাচককে যেমন বৈশিষ্ট্যযুক্ত করতে উপাদান ব্যবহার করতে চান তবে আপনাকে নির্দেশিকা ব্যবহার করতে হবে। আপনার BoolComponent জন্য selector='bool-field' BoolComponent selector='bool-field' ব্যবহার করুন।

  2. ত্রুটিটি যেমন বলেছে, আপনার জেনেরিক <field> উপাদানটিতে বাঁধতে কোনও type বৈশিষ্ট্য নেই। আপনি একটি ইনপুট সদস্য ভেরিয়েবল যুক্ত করে এটি ঠিক করতে পারেন: @Input() type: string; ইনপুট @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"
        }
    ]
}

আমি একটি জেনেরিক বিভাগের অংশটি চাই যা এটি বিভিন্ন ধরণের ক্ষেত্রগুলি সম্পর্কে জানে না যা বিভাগটি টেম্পলেটে প্রচুর শর্তাধীন যুক্তি এড়াতে এবং একটি নতুন ক্ষেত্রের মতামত / উপাদানগুলি নিজের মধ্যে ফেলে রেখে যোগ করতে পারে একটি পৃথক উপাদান পরিবর্তন করার পরিবর্তে ফাইল কনটেনড।

আমার আদর্শটি কোনও অংশের নির্বাচকের পক্ষে যথেষ্ট সুনির্দিষ্ট হতে হবে যা আমি মডেলের সাথে আবদ্ধ বৈশিষ্ট্যের মানগুলির ভিত্তিতে প্যারেন্ট কম্পোনেন্টের টেম্পলেটে একটি উপাদান নির্বাচন করে এটি সম্পাদন করতে পারি। উদাহরণস্বরূপ: (এসও উইন্ডোতে কোড করার সাথে সাথে কোনও সিনট্যাক্স সমস্যা ক্ষমা করুন, মনোযোগ দেওয়ার মূল অংশটি বুলিয়ান কম্পোনেন্ট.টিসে নির্বাচক is

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() {}
}

... এবং সময়ের সাথে সাথে আমি অন্যান্য নির্দিষ্ট ক্ষেত্রের জন্য বিশেষ টেমপ্লেট এবং আচরণ প্রদানের জন্য, এমনকি নির্দিষ্ট ক্যাপশন সহ ক্ষেত্রগুলিও সরবরাহ করতে নতুন উপাদান যুক্ত করব etc.

এটি কাজ করে না কারণ উপাদান নির্বাচনকারীদের অবশ্যই একটি সাধারণ উপাদান নাম হতে হবে (কমপক্ষে alpha.26 এবং alpha.27 এ)। গিথুব কথোপকথনের আমার গবেষণা আমাকে বিশ্বাস করতে পরিচালিত করে যে এই বিধিনিষেধটি শিথিল করা হচ্ছে, তবে আমি যা করতে চাই তা আসলে সমর্থন করা হবে কিনা তা আমি নির্ধারণ করতে পারি না।

বিকল্পভাবে, আমি একটি ডায়নামিক কম্পোনেন্টলয়েডার উল্লেখ করেছি, যদিও এখন আমি যে উদাহরণটি কৌনিক.ও গাইডে ভেবেছিলাম তার উদাহরণ আমি পাই না। তবুও, আমি জানি না কীভাবে এটি কোনও উপাদানকে গতিশীলভাবে লোড করতে ব্যবহৃত হতে পারে যা এটির জন্য নাম বা মিলের মানদণ্ড জানে না।

আমি যে চেষ্টা করেছি তার অনুরূপ কোনও কৌশল ব্যবহার করে, বা কৌনিক 2 এ আমি অপ্রত্যাশিত অন্য কোনও কৌশল ব্যবহার করে তাদের পিতামাতার কাছ থেকে বিশেষায়িত উপাদানগুলি ডিকম্পল করার আমার লক্ষ্য অর্জন করার কোনও উপায় আছে কি?

আপডেট 2015-07-06

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

আমি ভেবেছিলাম যে আমি যে ত্রুটিগুলি আরও স্পষ্টভাবে চালিয়েছি সেগুলি প্রদর্শন করা ভাল। আমি কিছু নমুনা কোড সহ একটি প্লাঙ্ক অন্তর্ভুক্ত করেছি, যদিও এই 3 টি ত্রুটির মধ্যে কেবল প্রথমটি দৃশ্যমান হবে, কারণ প্রত্যেকে একে অপরকে অবরুদ্ধ করে রাখে যাতে আপনি একবারে কেবল একটি প্রদর্শন করতে পারেন। আমি এই মুহুর্তের জন্য # 2 এবং # 3 কাছাকাছি পাওয়ার জন্য হার্ড কোডিং করেছি।

  1. বুলিয়ান কম্পোনেন্টে আমার নির্বাচক নির্বাচক কিনা selector: 'field[type=bool]' বুল selector: 'field[type=bool]' বা selector: '[type=bool]' , আমি কৌণিক থেকে একটি ত্রুটি স্ট্যাক পেয়েছি

    উপাদান 'বুলিয়ান কম্পোনেন্ট' এর মধ্যে কেবলমাত্র একটি উপাদান নির্বাচক থাকতে পারে, তবে '[টাইপ = বুল] ছিল'

  2. <field [type]="field.type"></field> আমার <field [type]="field.type"></field> টাইপ মানটি টাইপ বৈশিষ্ট্যের সাথে আবদ্ধ করে না, তবে আমাকে এই ত্রুটিটি দেয় (যা শুকরিয়া এখন আলফা ২৮-তে দেখা যাচ্ছে। আলফা ২ In এ আমি আগে ছিলাম চালু, এটি নিঃশব্দে ব্যর্থ হয়েছে)। আমি এই ত্রুটি থেকে মুক্তি পেতে পারি আমার ফিল্ডকম্পোন্ট এবং ডেরিভেটিভ বুলিয়ানকম্পোন্টে একটি প্রকারের সম্পত্তি যুক্ত করে এবং এটি @ সংস্থার বৈশিষ্ট্য সংগ্রহের মাধ্যমে ওয়্যারিং আপ করতে পারি, তবে উপাদানগুলির কোনও কিছুর জন্য আমার এটির প্রয়োজন নেই।

    'ক্ষেত্রের' উপাদানটির পরিচিতি সম্পত্তি না হওয়ায় এবং প্রাসঙ্গিক সম্পত্তির সাথে কোনও মিলের দিকনির্দেশনা নেই বলে 'টাইপ' করতে বাঁধতে পারবেন না

  3. আমি আমার সেকশন কম্পোনেন্ট ভিউ টীকাটির দিকনির্দেশনা তালিকায় ফিল্ড কম্পোনেন্ট এবং বুলিয়ান কম্পোনেন্টকে তালিকাবদ্ধ করতে বাধ্য হচ্ছি, বা সেগুলি খুঁজে পাওয়া যাবে না এবং প্রয়োগ করা হবে না। আমি কৌণিক দল থেকে নকশা আলোচনাটি পড়েছি যেখানে তারা বাহ্যিক গ্রন্থাগারে নির্দেশের সাথে সংঘর্ষের ঘটনাগুলি হ্রাস করার জন্য স্পষ্টবাদীর পক্ষে এই সচেতন সিদ্ধান্ত নিয়েছিল, তবে এটি ড্রপ-ইন উপাদানগুলির পুরো ধারণাটি ভেঙে দেয় যা আমি অর্জন করার চেষ্টা করছি।

এই মুহুর্তে, আমি অ্যাঙ্গুলার 2 এমনকি নির্বাচক থাকতে কেন বিরক্ত করে তা জানার জন্য আমি লড়াই করছি। অভিভাবক উপাদানটি ইতিমধ্যে তাদের সন্তানের উপাদানগুলি কী থাকবে, কোথায় যাবে এবং তাদের কী ডেটা প্রয়োজন তা জানতে হবে। নির্বাচকরা এই মুহুর্তে পুরোপুরি অতিরিক্ত অতিরিক্ত, এটি ঠিক পাশাপাশি শ্রেণি নামের মিলনের একটি সম্মেলন হতে পারে। আমি উপাদানগুলি ডিকুয়াল করার জন্য আমার বিমূর্ততা দেখছি না।

অ্যাঙ্গুলার 2 কাঠামোর ক্ষমতার এই সীমাবদ্ধতার কারণে, আমি আমার নিজস্ব উপাদান রেজিস্ট্রেশন স্কিম তৈরি করছি এবং এটিকে ডায়নামিক কম্পোনেন্টলয়েডারের মাধ্যমে রাখছি, তবে আমি এখনও সেই ব্যক্তির পক্ষে কোনও প্রতিক্রিয়া দেখতে খুব আগ্রহী হবো যারা এটি সম্পাদন করার জন্য আরও ভাল উপায় খুঁজে পেয়েছে for ।


আমার ধারণা আপনি সমস্ত উপাদান সন্ধান করতে কোয়েরি / ভিউকিউরি এবং কোয়েরিলিস্ট ব্যবহার করতে পারেন, কোয়েরি লিস্টের পরিবর্তনের জন্য সাবস্ক্রাইব করতে এবং কোনও বৈশিষ্ট্য, স্মেথ দ্বারা ফিল্টার উপাদানগুলিকে সাবস্ক্রাইব করতে পারেন। এটার মত:

constructor(@Query(...) list:QueryList<...>) {
   list.changes.subscribe(.. filter etc. ..);
}

এবং আপনি যদি টাইপ করতে বাঁধতে চান তবে আপনার এটি করা উচিত:

  <input [attr.type]="type"/>




angular