Hvordan sende flere parametere til @Directives (@Components) i Angular med TypeScript?

Siden jeg har opprettet @Directive som SelectableDirective, er jeg litt forvirret over hvordan jeg kan sende mer enn én verdi til den egendefinerte direktiven. Jeg har søkt mye, men har ikke fått en riktig løsning i Angular med Typescript.

Her er hva mitt eksempelkode er:

Foreldrekomponent som 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){}
    ....
}

Dette er en foreldrekomponent som har en egendefinert direktiv [selectable] som tar en parameter kalt opt.

Her er koden for denne direktiven:

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;

    ...
}

Så her vil jeg sende flere parametere fra forelder komponent, hvordan oppnår jeg dette?

Svar #1

Fra Dokumentasjonen

Som med komponenter, kan du legge til så mange direktive egenskapsbindinger du trenger ved å sette dem sammen i malen.

Legg til en input-egenskap til HighlightDirective kalt defaultColor:

@Input() defaultColor: string;

Oppmerking

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

Angular vet at defaultColor binding tilhører HighlightDirective fordi du gjorde den offentlig med @Input dekoratøren.

Uansett forteller @Input-dekortøren Angular at denne egenskapen er offentlig og tilgjengelig for binding av en foreldrekomponent. Uten @Input nekter Angular å binde til egenskapen.

For ditt eksempel

Med mange parametere

Legg til egenskaper i Directive-klassen med @Input()-dekoratøren

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

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

    ...
}

Og i malen sender du bundne egenskaper til ditt li-element

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

Her på li-elementet har vi en direktiv med navnet selectable. I selectable har vi to @Input()-er, f med navnet first og s med navnet second. Vi har brukt disse to på li-egenskapene med navn [first] og [second]. Og vår direktiv vil finne disse egenskapene på det li-elementet, som er satt for den med @Input()-dekoret. Så selectable, [first] og [second] vil bli bundet til hver direktiv på li, som har egenskapene med disse navnene.

Med enkelt parameter

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

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

    ...
}

Oppmerking

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

Svar #2

for å sende mange alternativer kan du sende et objekt til en @Input-dekoratør med egendefinerte data på én linje.

I malen

<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>

så i direktivklassen

@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
}

Svar #3

Et annet praktisk alternativ er å bruke Directive som et element og ikke som et attributt.

@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}`);
    }
}

Og denne direktiven kan brukes på den måten:

<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>`

Enkelt, ryddig og kraftig.

Relaterte artikler