¿Cómo pasar múltiples parámetros a @Directives (@Components) en Angular con TypeScript?

Solución:

Desde el Documentación

Al igual que con los componentes, puede agregar tantos enlaces de propiedad de directiva como necesite encadenándolos en la plantilla.

Agregar una propiedad de entrada a HighlightDirective llamado defaultColor:

@Input() defaultColor: string;

Margen

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

Angular sabe que el defaultColor la unión pertenece a la HighlightDirective porque lo hiciste público con el @Input
decorador.

De cualquier manera, el @Input decorator le dice a Angular que esta propiedad es pública y está disponible para ser enlazada por un componente principal. Sin
@Input, Angular se niega a unirse a la propiedad.

Por tu ejemplo

Con muchos parámetros

Agregue propiedades en el Directive clase con @Input() decorador

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

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

    ...
}

Y en la plantilla, pase las propiedades vinculadas a su li elemento

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

Aquí en el li elemento tenemos una directiva con nombre selectable. En el selectable tenemos dos @Input()‘s, f con nombre first y s con nombre second. Hemos aplicado estos dos en el li propiedades con nombre [first] y [second]. Y nuestra directiva encontrará estas propiedades en ese li elemento, que se establecen para él con @Input() decorador. Entonces selectable, [first] y [second] estará sujeto a todas las directivas sobre li, que tiene propiedad con estos nombres.

Con un solo parámetro

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

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

    ...
}

Margen

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

para pasar muchas opciones, puede pasar un objeto a un decorador @Input con datos personalizados en una sola línea.

En la plantilla

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

así que en clase directiva

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

Otra buena opción es utilizar el Directive como elemento y no como atributo.

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

Y esta directiva se puede usar así:

<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, ordenado y poderoso.

---

---

Utiliza Nuestro Buscador