Depuis que j'ai créé @Directive en tant que SelectableDirective, je suis un peu confus, sur la façon de passer plus d'une valeur à la directive personnalisée. J'ai beaucoup cherché mais je n'ai pas trouvé de solution appropriée dans Angular avec Typescript .

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

Il s'agit d'un composant parent ayant une directive personnalisée [sélectionnable] qui prend un paramètre appelé opt .

Voici le code de cette 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;

    ...
}

Alors ici, je veux passer plus de paramètres du composant parent , comment puis-je y parvenir?

76
Shree 9 août 2016 à 09:25

4 réponses

Meilleure réponse

Depuis la Documentation

Comme pour les composants, vous pouvez ajouter autant de liaisons de propriétés de directive que vous le souhaitez en les enchaînant dans le modèle.

Ajoutez une propriété d'entrée à HighlightDirective appelée defaultColor:

@Input() defaultColor: string;

Marquage

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

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

Quoi qu'il en soit, le décorateur @Input indique à Angular que cette propriété est public et disponible pour la liaison par un composant parent. Sans pour autant @Input, Angular refuse de se lier à la propriété.

Pour votre exemple

Avec de nombreux paramètres

Ajoutez des propriétés dans la classe Directive 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, passez les propriétés liées à votre élément li

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

Ici, sur l'élément li, nous avons une directive avec le nom selectable. Dans le selectable, nous avons deux @Input(), f avec le nom first et s avec le nom second. Nous avons appliqué ces deux éléments aux propriétés li portant le nom [first] et [second]. Et notre directive trouvera ces propriétés sur cet élément li, qui sont définies pour lui avec @Input() décorateur. Ainsi, selectable, [first] et [second] seront liés à chaque directive sur li, qui a une propriété avec ces noms.

Avec un seul paramètre

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

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

    ...
}

Marquage

<li *ngFor = 'let opt of currentQuestion.options' 
    [selectable] = 'opt' 
    [params]='{firstParam: 1, seconParam: 2, thirdParam: 3}'
    (selectedOption) = 'onOptionSelection($event)'>
    {{opt.option}}
</li>
111
Suren Srapyan 16 oct. 2017 à 13:09

Une autre option intéressante consiste à utiliser le 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.

6
Aharon Ohayon 29 août 2018 à 10:22

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 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
}
14
Dag 20 août 2016 à 19:30

Semblable aux solutions ci-dessus, j'ai utilisé @Input() dans une directive et capable de transmettre plusieurs tableaux de valeurs dans la directive.

selector: '[selectorHere]',

@Input() options: any = {};

Input.html

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

Tableau à partir du fichier TS

selectorArray= {
  align: 'left',
  prefix: '$',
  thousands: ',',
  decimal: '.',
  precision: 2
};
1
Armel 14 févr. 2019 à 13:10