javascript - compile - directivas angularjs

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

Question

Desde que creé @Directive como @Directive , estoy un poco confundido acerca de cómo pasar más de un valor a la directiva personalizada. He buscado mucho pero no obtuve la solución adecuada en Angular con Typecript .

Aquí está mi código de muestra:

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

Este es un componente principal que tiene una directiva personalizada [seleccionable] que toma un parámetro llamado opt .

Aquí está el código para esta directiva:

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;

    ...
}

Entonces, aquí quiero pasar más parámetros del componente principal , ¿cómo puedo lograr esto?

Answer 1

De la Documentation

Al igual que con los componentes, puede agregar tantos enlaces de propiedades de directivas como necesite al unirlos en la plantilla.

Agregue una propiedad de entrada a HighlightDirective llamada defaultColor :

@Input() defaultColor: string;

Margen

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

Angular sabe que el enlace defaultColor pertenece a HighlightDirective porque lo hizo público con el decorador @Input .

De cualquier manera, el decorador @Input le dice a Angular que esta propiedad es pública y está disponible para que un componente padre la enlace. Sin @Input , Angular se niega a unirse a la propiedad.

Por su ejemplo

Con muchos parámetros

Agregue propiedades a la clase Directive con el decorador @Input()

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

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

    ...
}

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

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

Aquí en el elemento li 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 las propiedades li con el nombre [first] y [second] . Y nuestra directiva encontrará estas propiedades en ese elemento li , que se configuran para él con el decorador @Input() . Por lo tanto, selectable , [first] y [second] estarán vinculados a cada directiva en li , que tiene propiedades 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>

Answer 2

Otra buena opción es utilizar la Directive como un elemento y no como un 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.

Answer 3

Similar a las soluciones anteriores, utilicé @Input() en una directiva y pude pasar múltiples matrices de valores en la directiva.

selector: ''[selectorHere]'',

@Input() options: any = {};

Input.html

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

Matriz del archivo TS

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

Answer 4

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