javascript - টাইপস্ক্রিপ্ট সহ কৌনিকটিতে @ নির্দেশিকাগুলি(@ উপাদান)গুলিতে একাধিক পরামিতি কীভাবে পাস করবেন?




angular typescript (3)

যেহেতু আমি @Directive হিসাবে তৈরি করেছি, তাই কাস্টম নির্দেশিকায় একাধিক মান কীভাবে পাঠানো যায় সে সম্পর্কে আমি কিছুটা বিভ্রান্ত। আমি অনেক অনুসন্ধান করেছি কিন্তু টাইপসক্রিপ্ট সহ কৌনিকটিতে সঠিক সমাধান পাইনি

এখানে আমার নমুনা কোডটি কী:

MCQComponent কম্পোনেন্ট হিসাবে মূল উপাদান:

import { Component, OnInit } from '@angular/core';
import { Question } from '../question/question';
import { AppService } from '../app.service/app.service';
import { SelectableDirective } from '../selectable.directive/selectable.directive';
import { ResultComponent } from '../result-component/result.component';

@Component({
    selector: 'mcq-component',
    template: "
         .....
        <div *ngIf = 'isQuestionView'>
            <ul>
                <li *ngFor = 'let opt of currentQuestion.options' 
                    [selectable] = 'opt'
                    (selectedOption) = 'onOptionSelection($event)'>
                    {{opt.option}}
                </li>
            </ul>
            .....
        </div>

    "
    providers: [AppService],
    directives: [SelectableDirective, ResultComponent]
})
export class MCQComponent implements OnInit{
    private currentIndex:any = 0;
    private currentQuestion:Question = new Question();
    private questionList:Array<Question> = [];
    ....
    constructor(private appService: AppService){}
    ....
}

এটি কাস্টম দিকনির্দেশক [নির্বাচিত] এমন একটি প্যারেন্ট উপাদান যা অপ্ট নামে পরিচিত একটি প্যারাম নেয়।

এই নির্দেশের কোড এখানে:

import { Directive, HostListener, ElementRef, Input, Output, EventEmitter } from '@angular/core'
import { Question } from '../question/question';

@Directive({
    selector: '[selectable]'
})
export class SelectableDirective{
    private el: HTMLElement;
    @Input('selectable') option:any;

    ...
}

সুতরাং এখানে আমি প্যারেন্ট উপাদান থেকে আরও পরামিতিগুলি পাস করতে চাই, আমি কীভাবে এটি অর্জন করব?


অনেকগুলি অপশন পাস করার জন্য আপনি একটি লাইনটিতে কাস্টম ডেটা দিয়ে কোনও @ ইনপুট ডিকোয়টারের কাছে একটি বস্তুটি পাস করতে পারেন।

টেমপ্লেটে

<li *ngFor = 'let opt of currentQuestion.options' 
                [selectable] = 'opt'
                [myOptions] ="{first: opt.val1, second: opt.val2}" // these are your multiple parameters
                (selectedOption) = 'onOptionSelection($event)' >
     {{opt.option}}
</li>

তাই নির্দেশিকা ক্লাসে

@Directive({
  selector: '[selectable]'
})

export class SelectableDirective{
  private el: HTMLElement;
  @Input('selectable') option:any;
  @Input('myOptions') data;

  //do something with data.first
  ...
  // do something with data.second
}

আর একটি ঝরঝরে বিকল্প হ'ল Directive উপাদান হিসাবে ব্যবহার করা, কোনও গুণ হিসাবে নয়।

@Directive({
   selector: 'app-directive'
})
export class InformativeDirective implements AfterViewInit {

    @Input()
    public first: string;

    @Input()
    public second: string;

    ngAfterViewInit(): void {
       console.log(`Values: ${this.first}, ${this.second}`);
    }
}

এবং এই নির্দেশিকাটি এর মতো ব্যবহার করা যেতে পারে:

<app-someKindOfComponent>
    <app-directive [first]="'first 1'" [second]="'second 1'">A</app-directive>
    <app-directive [first]="'First 2'" [second]="'second 2'">B</app-directive>
    <app-directive [first]="'First 3'" [second]="'second 3'">C</app-directive>
</app-someKindOfComponent>`

সরল, ঝরঝরে ও শক্তিশালী।


Documentation থেকে

উপাদানগুলির মতো, আপনি টেমপ্লেটের সাথে স্ট্রিং করে আপনার প্রয়োজনীয় যতগুলি নির্দেশিক সম্পত্তি যুক্ত করতে পারেন।

defaultColor নামে পরিচিত একটি defaultColor একটি ইনপুট সম্পত্তি যুক্ত করুন:

@Input() defaultColor: string;

মার্কআপ

<p [myHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>

কৌণিক জানে যে defaultColor বাইন্ডিং defaultColor অন্তর্গত কারণ আপনি @Input সাহায্যে এটি সর্বজনীন করেছেন।

যে কোনও উপায়ে, @Input সাজসজ্জাটি @Input বলে যে এই সম্পত্তিটি সর্বজনীন এবং পিতামাতার উপাদান দ্বারা বাঁধার জন্য উপলব্ধ। @Input ব্যতীত, @Input সম্পত্তিতে আবদ্ধ হতে অস্বীকার করে।

আপনার উদাহরণের জন্য

অনেক পরামিতি সহ

@Input() সাজসজ্জারের সাহায্যে @Input() শ্রেণিতে বৈশিষ্ট্য যুক্ত করুন

@Directive({
    selector: '[selectable]'
})
export class SelectableDirective{
    private el: HTMLElement;

    @Input('selectable') option:any;   
    @Input('first') f;
    @Input('second') s;

    ...
}

এবং টেমপ্লেটে আপনার li উপাদানটিতে সীমাবদ্ধ বৈশিষ্ট্যগুলি প্রেরণ করুন

<li *ngFor = 'let opt of currentQuestion.options' 
    [selectable] = 'opt' 
    [first]='YourParameterHere'
    [second]='YourParameterHere'
    (selectedOption) = 'onOptionSelection($event)'>
    {{opt.option}}
</li>

এখানে li এলিমেন্টে আমাদের নাম selectable একটি নির্দেশ রয়েছে। @Input() আমরা দুটি @Input() এর, first নামের সাথে f এবং second নাম সহ s আমরা এই প্রথম দুটি নামের সাথে [first] এবং [second] নাম প্রয়োগ করেছি। এবং আমাদের নির্দেশিকাটি এই li উপাদানটিতে এই বৈশিষ্ট্যগুলি খুঁজে পাবে, যা তার জন্য @ @Input() সাজসজ্জারের জন্য সেট করা আছে। সুতরাং selectable , [first] এবং [second] li প্রতিটি নির্দেশের জন্য আবদ্ধ হবে, যার এই নামগুলির সম্পত্তি রয়েছে।

একক প্যারামিটার সহ

@Directive({
    selector: '[selectable]'
})
export class SelectableDirective{
    private el: HTMLElement;

    @Input('selectable') option:any;   
    @Input('params') params;

    ...
}

মার্কআপ

<li *ngFor = 'let opt of currentQuestion.options' 
    [selectable] = 'opt' 
    [params]='{firstParam: 1, seconParam: 2, thirdParam: 3}'
    (selectedOption) = 'onOptionSelection($event)'>
    {{opt.option}}
</li>




angular6