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
}