javascript - टाइपस्क्रिप्ट के साथ कोणीय में @Directives(@Compords) के लिए कई पैरामीटर कैसे पास करें?




angular typescript (3)

चूँकि मैंने @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;

    ...
}

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


उपरोक्त समाधानों के समान मैंने एक निर्देश में @Input() उपयोग किया और निर्देश में मानों के कई सरणियों को पारित करने में सक्षम है।

selector: '[selectorHere]',

@Input() options: any = {};

Input.html

<input selectorHere [options]="selectorArray" />

TS फ़ाइल से सरणी

selectorArray= {
  align: 'left',
  prefix: '$',
  thousands: ',',
  decimal: '.',
  precision: 2
};

एक अन्य साफ विकल्प यह है कि 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() डेकोरेटर के साथ 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 हमारे पास दो @Input() का नाम है, first नाम के साथ f और second नाम के साथ s । हमने इन दोनों को li संपत्तियों पर नाम [first] और [second] । और हमारा निर्देश उस li तत्व पर इन गुणों को @Input() , जो @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