Comment passer plusieurs paramètres à @Directives in Angular avec TypeScript?

Question

Depuis que j'ai créée @Directive comme SelectableDirective, je suis peu confus sur la façon de passer plus d'une valeur à la coutume de la directive. J'ai beaucoup cherché mais n'obtient pas la bonne solution dans Angulaire avec la Machine.

Voici ce que mon exemple de code est:

Composant Parent en tant que 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){}
    ....
}

C'est un composant parent ayant la coutume de la directive [sélectionnables] qui prend un paramètre appelé opt.

Voici le code de la présente directive:

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;

    ...
}

Je tiens donc ici pour passer plusieurs paramètres à partir de parent composant, comment puis-je y parvenir?

Answer 1

À partir de la Documentation

Comme pour les composants, vous pouvez ajouter autant de propriété directive de liaisons vous avez besoin de cordage le long dans le modèle.

Ajouter une entrée de la propriété à l' HighlightDirective appelés defaultColor:

@Input() defaultColor: string;

Balisage

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

Angulaire sait que l' defaultColor liaison appartient à l' HighlightDirective parce que vous l'avez fait publique avec l' @Input décorateur.

De toute façon, l' @Input décorateur dit Angulaire que cette propriété est public et disponibles pour la liaison par un composant parent. Sans @Input, Angulaire refuse de se lier à la propriété.

Pour ton exemple

Avec de nombreux paramètres

Ajoutez des propriétés dans l' Directive classe avec @Input() décorateur

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

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

    ...
}

Et dans le modèle de passer des propriétés liées à votre li élément

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

Ici, sur l' li élément que nous avons une directive avec le nom selectable. Dans l' selectable nous avons deux @Input()', f nom first et s nom second. Nous avons appliqué ces deux sur l' li propriétés avec le nom [first] et [second]. Et nos directive trouverez ces propriétés li élément, qui sont pour lui avec @Input() décorateur. Donc, selectable, [first] et [second] sera lié à chaque directive sur li, ce qui est bien avec ces noms.

Avec un seul paramètre

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

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

    ...
}

Balisage

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

Answer 2

Pour passer de nombreuses options, vous pouvez passer un objet à un décorateur @Input avec des données personnalisées sur une seule ligne.

Dans le modèle

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

donc dans la classe de directive

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

Answer 3

Une autre option intéressante consiste à utiliser Directive comme élément et non comme attribut.

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

Et cette directive peut être utilisée comme ça:

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

Simple, soigné et puissant.