javascript टाइपस्क्रिप्ट के साथ कोणीय में @ डायरेक्टिव्स को एकाधिक पैरामीटर कैसे पास करें?




angular typescript (2)

कई विकल्पों को पारित करने के लिए आप किसी ऑब्जेक्ट को एक इनपुट में कस्टम डेटा के साथ एक @ इनपुट सजावट में पास कर सकते हैं।

टेम्पलेट में

<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 बनाया है, इसलिए मैं कस्टम निर्देश के लिए एक से अधिक मूल्यों को पारित करने के बारे में थोड़ा उलझन में हूं। मैंने बहुत कुछ खोजा है लेकिन एंगुलर में टाइपस्क्रिप्ट के साथ उचित समाधान नहीं मिला है।

यहां मेरा नमूना कोड है:

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;

    ...
}

तो यहां मैं मूल घटक से अधिक पैरामीटर पास करना चाहता हूं, मैं इसे कैसे प्राप्त करूं?


Documentation

घटकों के साथ, आप टेम्पलेट में उन्हें स्ट्रिंग करके आवश्यकतानुसार कई निर्देशक संपत्ति बाइंडिंग जोड़ सकते हैं।

HighlightDirective defaultColor एक इनपुट प्रॉपर्टी जोड़ें जिसे defaultColor कहा जाता है:

@Input() defaultColor: string;

मार्कअप

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

कोणीय जानता है कि defaultColor बाध्यकारी HighlightDirective defaultColor संबंधित है क्योंकि आपने इसे @Input सजावट के साथ सार्वजनिक किया है।

किसी भी तरह से, @Input सजावट Angular बताता है कि यह संपत्ति सार्वजनिक है और एक मूल घटक द्वारा बाध्यकारी के लिए उपलब्ध है। @Input बिना, कोणीय संपत्ति से जुड़ने से इंकार कर देता है।

आपके उदाहरण के लिए

कई मानकों के साथ

@Input() सजावट के साथ Directive वर्ग में गुण जोड़ें

@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 निर्देश है। selectable करने selectable हमारे पास दो @Input() , f first नाम के साथ है और नाम second साथ है। हमने इन दोनों को li गुणों पर नाम [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